Combobox drop down rendered behind popup Panel

[towpse]

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?

[Atanas Korchev]

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.

[towpse]

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.

[towpse]

High.


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

Your ticket ID is : 165230


Regards.






mat.t.

[towpse]

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.

[Paul]

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.

[towpse]

Cool. That does work and helps. Except in FF there are still some odd animation behaviours.