Monday 23 April 2012

ASP.NET: AJAX Combo Box Item List placement problem - CSS Hacks

Occasionally, I like to use the ComboBox control from the Ajax Control Tookit. I hadn't used it for quite a while and added one to a recent project - one which I need to work in Chrome, Firefox and IE.
But the issue was that the ComboBox's item list would appear in a random place on the page, about 150 pixels away from the text box. No good.
It seems to be related to my use of Master pages but I couldn't find a solution which worked, so I decided (reluctantly) to hack the CSS. On my ComboBox control I have the CssClass set to 'CustomComboBoxStyle' and in my CSS I have a default selector for Chrome, then a hack for Firefox, followed by a second hack for IE 8 and 9 (if you're on any version of IE below 8, I don't care about you). The CSS ended up looking like this:

CSS
/* AJAX Combo Box Styles - HACKS here for item list */
.CustomComboBoxStyle table {margin-bottom:3px!important; top:0px!important;}
.CustomComboBoxStyle {position:relative;} 
.CustomComboBoxStyle ul { 
    position:absolute ! important; 
    left:2px ! important; 
    }
    
/* Chrome - default */
.CustomComboBoxStyle ul 
{
    top:2px ! important;    
}
/* Firefox */ 
@-moz-document url-prefix() {
        .CustomComboBoxStyle ul {
        top:22px ! important;
    }
}
/* IE 8 + 9 */
.CustomComboBoxStyle ul 
{
    top:15px \0/ !important;    
}

Markup
<asp:ComboBox ID="cmbCity" runat="server" 
    AutoPostBack="False" 
    DropDownStyle="DropDownList" 
    AutoCompleteMode="SuggestAppend" 
    CaseSensitive="False"  
    ItemInsertLocation="Append" CssClass="CustomComboBoxStyle"  >
    <asp:ListItem Value=""> -- Select city -- </asp:ListItem>
    <asp:ListItem Value="Aberdeen"></asp:ListItem>
    <asp:ListItem Value="Dundee"></asp:ListItem>
    <asp:ListItem Value="Edinburgh"></asp:ListItem>
    <asp:ListItem Value="Glasgow"></asp:ListItem>
    <asp:ListItem Value="Paisley"></asp:ListItem>
    <asp:ListItem Value="Perth"></asp:ListItem>
    <asp:ListItem Value="Stirling"></asp:ListItem>
</asp:ComboBox>

In my solution, this worked (with pangs of guilt at such hackery). I absolutely do not guarantee or even assert that it will work for you, but it could be worth a shot. 

5 comments:

Anonymous said...

Thanks for the hack! I had to play around with it a bit, but got it to work in my environment. A shame this has to be done, though...

Anonymous said...

Thanks for the hack! I had to play around with it a bit, but got it to work in my environment. A shame this has to be done, though...

Anonymous said...

Thanks for the hack! I had to play around with it a bit, but got it to work in my environment. A shame this has to be done, though...

Anonymous said...

Thanks for the hack! I had to play around with it a bit, but got it to work in my environment. A shame this has to be done, though...

Anonymous said...

Thanks for the hack! I had to play around with it a bit, but got it to work in my environment. A shame this has to be done, though...