DropDown portion not displaying at all

[Jason]

Hi,

I've got a RadComboBox (version 2012.1.411.40) that has the input/display box and down arrow sections showing up just fine, but when I click on the down arrow, the drop down list fails to appear.  I've checked the generated page source and can see the list of the items that are supposed to be showing up.  All list items are being loaded up-front, there is no on-demand functionality being utilized. I was using a custom skin that I thought might be the source of the issue, but I switched back to the default embedded skin, and the problem is persisting. I am trying to use the control on a content page which is contained within an UpdatePanel on the master page.  I'm not receiving any sort of error on the page (JavaScript or otherwise).  While the drop down list never shows up, I can use the up and down arrow keys to scroll through the options, and the auto-complete feature still works as well.

Here's the markup and generated HTML, in case it helps:

<telerik:RadComboBox ID="ddlSearchRoles" runat="server" EnableEmbeddedSkins="true"
    AllowCustomText="false" EnableLoadOnDemand="false" MarkFirstMatch="false" />

<div class="rcbSlide" style="z-index: 6000; visibility: visible; display: none; overflow: hidden; margin-left: 0pt; position: absolute; top: 323.5px; left: 806.283px; height: 107px; width: 160px;">
    <div id="ctl00_ContentPlaceHolder1_ddlSearchRoles_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="display: block; visibility: visible; top: -107px; left: 0px; width: 158px;">
        <div class="rcbScroll rcbWidth" style="width: 100%; overflow: auto; height: 105px;">
            <ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
                <li class="rcbHovered ">-All-</li>
                <li class="rcbItem ">Application Admin</li>
                <li class="rcbItem ">Dependent Member</li>
                <li class="rcbItem ">Practice Admin</li>
                <li class="rcbItem ">Primary Member</li>
            </ul>
        </div>
    </div>
</div>

 <div id="ctl00_ContentPlaceHolder1_ddlSearchRoles" class="RadComboBox RadComboBox_Default" style="width:160px;">
    <table class="" style="border-width: 0pt; border-collapse: collapse;" summary="combobox">
        <tbody>
            <tr class="rcbReadOnly">
                <td class="rcbInputCell rcbInputCellLeft" style="width:100%;">
                    <input id="ctl00_ContentPlaceHolder1_ddlSearchRoles_Input" class="rcbInput" type="text" readonly="readonly" value="-All-" name="ctl00$ContentPlaceHolder1$ddlSearchRoles" autocomplete="off">
                </td>
                <td class="rcbArrowCell rcbArrowCellRight">
                    <a id="ctl00_ContentPlaceHolder1_ddlSearchRoles_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
                </td>
            </tr>
        </tbody>
    </table>
    <input id="ctl00_ContentPlaceHolder1_ddlSearchRoles_ClientState" type="hidden" name="ctl00_ContentPlaceHolder1_ddlSearchRoles_ClientState" autocomplete="off">
</div>

Any ideas or suggestions?

Thanks,
Jason

[Ivana]

Hi Jason,

In most cases the described behavior is related to a JavaScript error. If you are using Firefox the errors might not get displayed unless the developer tool is opened. In IE, on the other hand, the JS errors are not displayed unless you have configured the browsers settings to do so. This is done through the Tools
menu -- Tools->Internet Options->Advanced->Display a notification about every scrip error (under the Browsing section). Could you please verify that this is the case with your scenario?

If  it is not, it would be very helpful if you could open a support ticket on this matter and send us a sample project with the troubled behavior replicated in it so we will be able to troubleshoot the issues locally.

Greetings,
Ivana
the Telerik team

[Jason]

Thanks for the reply.  I verified that it was not a JavaScript error, but was able to discover it was apparently a CSS issue.
Adding

div.rcbSlide
{
    z-index: 9999 !important;
}

resolved the issue.

Thanks!