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.
Monday, 23 April 2012
ASP.NET: AJAX Combo Box Item List placement problem - CSS Hacks
Labels: asp.net, asp.net ajax combo, tech problems
Subscribe to:
Post Comments (Atom)
5 comments:
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...
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...
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...
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...
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...
Post a Comment