Question

I was wondering why the following code:

<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None 
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>&nbsp;<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>

produces the combobox with label “Days” to the right off of it in IE9 and FireFox but when I run it using Chrome the “Days” label appears below the combo box?

How do I make it to be drawn to the right off the combo box like the rest of the browsers?

Answer 1

First up the Combo Box is not part of the “Standard” asp.net controls. I’m assuming you are using the asp.net AJAX Toolkit for this. As the Combo box is a compound control it does not render “Clean HTML” eg:

<select id="DropDown1"></select> Days

Instead it renders:

<div id="DropDown1" style="display:inline-block;">    
    <table id="DropDown1_Table" 
           class="ajax__combobox_inputcontainer" 
           cellspacing="0" 
           cellpadding="0" 
           border="0" 
           style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">    
        <tr>    
             <td class="ajax__combobox_textboxcontainer">
                <input name="DropDown1$TextBox" 
                       type="text" 
                       id="DropDown1_TextBox" 
                       autocomplete="off" 
                       style="width:30px;" />
             </td>
             <td class="ajax__combobox_buttoncontainer">
                 <button id="DropDown1_Button" 
                         type="button"
                         style="visibility:hidden;"></button>
             </td>    
        </tr>    
     </table>
     <input type="hidden" 
            name="DropDown1$HiddenField" 
            id="DropDown1_HiddenField" 
            value="-1" />    
</div>&nbsp;Days

Which for me in chrome 14 displays with the Days in the same line as the drop down.

The thing to note is the div wrapping up the combo box control. Either the version on chrome you are using is ignoring the display:inline-block; style or you have some CSS somewhere that is somehow overriding this.

Maybe look at using the standard controls and use jQuery and page methods to roll your own combo box, or better still look at FlexBox.

Which version of chrome on which OS is causing the issue?

If you don’t need AJAX functionality just use the standard ASP:Dropdown control.

UPDATE:

Using Microsoft’s Combo Box Sample page reproduces your issue in Chrome. Looking at the rendered code it is different in IE and Chrome. This leads me to believe I have a different version of the tool kit to yourself and Microsoft (probably older!)

IE uses display:inline-block while chrome renders display:inline which would be causing the display anomaly.

To work around the issue with the version of the toolkit you are using, I would try the following:

<div style="display:inline-block">    
   <asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
   </asp:ComboBox>
</div>
&nbsp;<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>