AjaxToolkit:ComboBox + AjaxToolkit:ModalPopupExtender -- The ComboBox dropdown list cuts off... how to fix?

Question

Basically, I've got the following:

.AjaxComboBoxWindowsStyle
{
    position: relative;
}

.AjaxComboBoxWindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer, .AjaxComboBoxWindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer
{
    padding: 0 !important;
}

.AjaxComboBoxWindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 0px 0px 0px 0px;
    font-size: 13px;
    height: 19px !important;
}
.AjaxComboBoxWindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    margin: 0;
    padding: 0;
    background-image: url(Img/ComboBox/windows-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 21px !important;
    width: 21px !important;
}
.AjaxComboBoxWindowsStyle .ajax__combobox_itemlist
{
    border-color: #7F9DB9;
    position: absolute !important;
    left: -173px !important;
    top: 22px !important;
    width: 171px !important;
}

<asp:Panel id="divItem" class="lrgModalWrap" style="display: block;" runat="server">
                    <ajaxToolkit:ComboBox ID="cmbEmployees" CssClass="AjaxComboBoxWindowsStyle" runat="server" AutoPostBack="False" DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend" 
                    CaseSensitive="False" ItemInsertLocation="Append" MaxLength="32" />
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="mpeParcel" BackgroundCssClass="modalBgd" CancelControlID="lbtnCancelParcel" TargetControlID="hdnItem" PopupControlID="divItem" runat="server" />

The problem is that the ComboBox dropdown list cuts off where the popup model's bottom ends... the combobox portion in the popup modal renders properly, but the rest doesn't.

Oddly enough, a standard DropdownList (selection) renders properly.

I thought about that, I set the z-index to `20000 !important` (so that it goes above the 10001 that the ModelPopupExtender has. — myermian, Nov 23 '11 at 17:29

score 1 · Answer 1 · edited May 23 '17 at 10:34

1

This is probably a z-index related issue, where the ComboBox being rendered is not being set forward enough to be able to overlap on top of the modal popup being displayed.

Check out a similar issue I had relating to the Ajax Calendar Extender and you should be able to apply the same styling to it to allow it to display properly.

edited May 23 '17 at 10:34

Community

1
1

answered Nov 23 '11 at 17:29

Dillie-O

29,277
14
101
140

AjaxToolkit:ComboBox + AjaxToolkit:ModalPopupExtender -- The ComboBox dropdown list cuts off... how to fix?

1 Answers1