Combobox drop down rendered behind popup Panel

7 posts, 1 answers
  1. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 01 Oct 2008 Link to this post

    Hey all.
    I have an update panel around a MS panel that holds a bunch of stuff including a radCombo with a tree view in its item template.
    The MS panel is displayed as a popup by the ajaxmodalpopupextender.

    The combo is responding to the click but, as the title mentions,  the drop down is being renedred under the panel that is displayed by the popupextender... Not sure what to do about this. Can anyone help?
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 01 Oct 2008 Link to this post

    Hello Matt,

    You can try increasing the z-index of your combobox:

    <telerik:RadComboBox style="z-index:6000">

    I hope this helps,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 01 Oct 2008 Link to this post

    Hey Albert. Thanks for the suggestion. It didn't change the behaviour.

    I thought that it might effect the actual placement of the combo box itself but that seems fine.

    Here's the markup I'm getting:

    <

    div id="RadComboGroup" class="RadComboBox RadComboBox_WebBlue " style="width:200px;display:inline;zoom:1;vertical-align:middle; z-index:6000">
    <
    table cellpadding="0" cellspacing="0" summary="combobox" border="0" style="border-width:0;table-layout:fixed;border-collapse:collapse;width:100%">
    <
    tr>
    <
    td class="rcbInputCell rcbInputCellLeft" style="margin-top:-1px;margin-bottom:-1px;width:100%;">
    <
    input class="rcbInput" type="text" id="RadComboGroup_Input" name="RadComboGroup_Input" value="Select..." style="display:block;text-decoration:;" readonly="readonly"></input>
    </
    td>
    <
    td class="rcbArrowCell rcbArrowCellRight" style="margin-top:-1px;margin-bottom:-1px;">
    <
    a id="RadComboGroup_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
    </
    td>
    </
    tr>
    </
    table>
    <
    div class="rcbSlide" style="z-index:6000;">
    <
    div id="RadComboGroup_DropDown" class="RadComboBoxDropDown_WebBlue"
    style
    ="float:left;display:none;">
    <
    div class="rcbScroll rcbWidth" style="height:140px;width:100%;">
    <
    ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
    <
    li>
    <
    div id="RadComboGroup_i0_UpdateTreeView">
    <
    div onclick="StopPropagation(event)">
    <
    div id="RadComboGroup_i0_tree" ></div>
    </
    div>
    </
    li>
    </
    ul>
    </
    div>
    </
    div>
    </
    div>
    <
    input id="RadComboGroup_ClientState" name="RadComboGroup_ClientState"
    type
    ="hidden" />
    </
    div>

    If it would help I'd like to submit a ticket. My account doesn't have those priviledges at the moment since at this time I don't have access to my company's login.

    Perhaps I can mock up a qucik test page that reproduces the problem and post the markup here...


    On a side note, I'm also getting two scroll bars; one for the tree adn one for the containing div.. I can't remember how to resolve this.






    mat.t.

  5. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 01 Oct 2008 Link to this post

    High.


    I've submitted support ticket complete with a sample jig that reproduces the issue.

    Your ticket ID is : 165230


    Regards.






    mat.t.
  6. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 01 Oct 2008 Link to this post

    Setting the z-index to some high value works actually. 6000 was too low since the dialog uses 10000 for the background modal image...
    It's working well in IE.
    The functionality however is wonky in Firefox. The menu renders rather oddly as it animates and it renders behind buttons.
  7. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 02 Oct 2008 Link to this post

    Hello Matt,

    Actually, the problem is caused by the z-index of the ModalPopupExtender which is 100001.

    <div id="pnlMetadata" style="position: fixed; z-index: 100001; left: 510px; top: 207.5px;"
     
    Setting the combobox ZIndex property to 100500 fixes the issue under both IE and FF.

    Best wishes,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 02 Oct 2008 Link to this post

    Cool. That does work and helps. Except in FF there are still some odd animation behaviours.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017