|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi, I believe that the ComboBox control has a bug. See the following HTML code:
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestCombo._Default" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Combobox Bug</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:ComboBox
ID="ComboBox1" runat="server" ControlSkinID="None" DefaultIcon="../../../../images/question_mark.gif"
EnableKeyboardNavigation="True" LabelHtml="Country: " Width="176px" AllowCustomText="True" Font-Names="Verdana" Font-Size="11pt">
<IconAreaStyle CssText="font-family: tahoma; font-size: 11px; background-image:url(00107007); background-position: left left; background-repeat:no-repeat; vertical-align:middle;padding-left:2px; padding-right:2px;" />
<DropDownTemplate>
<eo:ListBox ID="ListBox1" runat="server" ControlSkinID="None" EnableKeyboardNavigation="true"
Height="150px" Width="200px">
<BodyStyle CssText="border: solid 1px #868686;" />
<ItemListStyle CssText="padding: 1px;" />
<DisabledItemStyle CssText="color:#c0c0c0;padding-bottom:1px;padding-left:6px;padding-right:6px;padding-top:3px;height:20px;" />
<ItemStyle CssText="color:black;padding-bottom:1px;padding-left:6px;padding-right:6px;padding-top:3px;height:20px;" />
<ListBoxStyle CssText="font-family:Tahoma; font-size:13px;background-color:white;" />
<MoreItemsMessageStyle CssText="padding:2px;" />
<SelectedItemStyle CssText="background-image:url(00106003);background-repeat:repeat;border-left-color:#c0a776;border-left-style:solid;border-left-width:1px;border-right-color:#c3aa79;border-right-style:solid;border-right-width:1px;color:black;height:20px;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:3px;" />
<ItemHoverStyle CssText="background-image:url(00106003);background-repeat:repeat;border-left-color:#c0a776;border-left-style:solid;border-left-width:1px;border-right-color:#c3aa79;border-right-style:solid;border-right-width:1px;color:black;height:20px;padding-bottom:1px;padding-left:5px;padding-right:5px;padding-top:3px;" />
<ItemTemplate>
<table border="0" cellpadding="1">
<tr>
<td>
<%#Container.Item.Text%>
</td>
</tr>
</table>
</ItemTemplate>
<Items>
<eo:ListBoxItem Text="Brazil" />
<eo:ListBoxItem Text="Canada" />
<eo:ListBoxItem Text="France" />
<eo:ListBoxItem Text="Germany" />
<eo:ListBoxItem Text="This country is here only to demonstrate the bug" />
<eo:ListBoxItem Text="United Kingdom" />
<eo:ListBoxItem Text="United States of America" />
</Items>
</eo:ListBox>
</DropDownTemplate>
<TextStyle CssText="FONT-SIZE: 11px" />
<TextAreaStyle CssText="BORDER-BOTTOM: #b7d9ed 1px solid; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FONT-FAMILY: Verdana; FONT-SIZE: 11px; VERTICAL-ALIGN: middle; BORDER-TOP: #3d7bad 1px solid" />
<ButtonStyle CssText="width:17px;height:23px;" />
<ButtonAreaStyle CssText="background-image:url(00107005);" />
<IconStyle CssText="display:none;" />
<ButtonAreaHoverStyle CssText="background-image:url(00107006);" />
<HintTextStyle CssText="font-style:italic;background-color:#c0c0c0;color:white;line-height:16px;" />
</eo:ComboBox>
</div>
</form>
</body>
</html>
When the AllowCustomText parameter is true and I select the option "This country is here only to demonstrate the bug", the Combobox text area respects the set dimensions, as below:  But, when I set the AllowCustomText parameter to false, the Combobox text area is adjusted to the text lenght, as below:  Another thing. I used a Listbox control in the Combobox DropDownTemplate. When I open the dropdown, the option "This country is here to only demonstrates the bug" has two line, as below:  It would not be right, or not break the line, or adjust the next option text to the end of this one? Regards, Marcelo Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
This is not a bug. The behavior is by design. The ComboBox is template based, which means you are in full control of each item's content. As such if you do not wish it to wrap lines, you do so in your template HTML. If you do not wish the item to have fixed height, you do not specify give it explicitly height in your style (ItemStyle has "height:20px" is what causes the item to overlap). The control takes anything you give to it very much literally as is so that you have to full power to customize it whatever wa you want.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi eo_support, Thanks so much for your reply, but I'm not understanding it right. I think that your reply refers only to the second part of my first post, which was the behavior of the DropDown template. I removed the height:20px not only in ItemStyle, but in DisabledItemStyle, SelectedItemStyle and ItemHoverStyle too, and change the background-color of the ItemHoverStyle, and get a more reasonable behavior, as follows:  My question is: Can I disable the break line in the Dropdown template when the text is too long? But the most important part of my first post is the first, which I considered an bug. Depending on the value of the AllowCustomText parameter, we have two distinct behavior in the text area of the ComboBox. When set to True, the text area is:  But, when it is set to False, the area is:  I think that should have the same behavior, no? And should be when the AllowCustomText parameter is set to true. Regards, Marcelo Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
As to your question:
1. Can I disable the break line?
This question is the same as "Can I disable the line break in HTML?" So we do not consider it as a question related to our product and will not answer that. The point is, the items are from your template. Anything you want to do would be inside your template. If you can break line in your template, then you can break line in the list item. If you cannot break line in your template, then you cannot break line in the list item. What we offer you is like an empty "box". What you do and how you do inside that box is completely up to you and beyond the scope of our support;
2. It behaves differently when AllowCustomText is true/false. This is expected. One is a textbox and one is static text. So there is no reason to expect them behave exactly the same. For example, user may want a simple "country flags" drop down to display a list of flags (thus the selected item displays flags as well) when AllowCustomText is false, but you cannot expect user to "type a flag" when AllowCustomText is true. These are just different circumstances for different scenarios and there is no hard rule that says the output of one circumstance has to look exactly the same as other circumstances. For the ComboBox, the textbox is always one line because it's rendered a simple text input control. It is implemented that way because a "multiple line editable combobox" would be very strange and uncommon to end users.
Hope this clears up.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi,
Thanks for your reply. As to my question:
1. Can I disable the break line
OK. No more considerations.
2. It behaves differently when AllowCustomText is true/false
I understood your explanations but I have other considerations.
You must to agree me. Both operationally as aesthetically, the ComboBox behavior when AllowCustomText is false is not good. The Combobox text area and the dropdown button are with different heights, this behavior moves all elements after the combobox to bottom. Sorry, but in my opinion the Combobox must have a similar behavior to the ASP.NET DropDownList, that's always truncates the text.
Moreover, the behavior of the way to show the text area is under the ComboBox control and I don't have any control over it. So, I can not change this behavior, right?
Please help me to fix this problem.
Thanks in advance and happy new year,
Marcelo Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Of course you can have control over the text area. We've said multiple times it's template based. You do anything you can do in your template.
As a custom control, one the most important goal for us is to provide something that ASP.NET does not have built-in. So if you believe everything should work the same as ASP.NET DropDownList, then why don't you just use ASP.NET DropDownList. One of the most important advantages of ComboBox is it's template based. So you can do anything in your template. There is no way we will modify your template thus put an unnecessary restrictions on the control.
This issue is now closed.
Thanks
|
|