RadComboBoc DropDownList (.rcbSlide) covers hover menu

5 posts, 0 answers
  1. Gregory
    Gregory avatar
    6 posts
    Member since:
    Aug 2011

    Posted 02 Dec 2011 Link to this post

      I've searched the forums but apparently I have the reverse problem of the majority. I have tried to implement reverse answers but to no avail.
      I have a RadComboBox implemented in a user control:

    <div class="fiFilterTitleBar">
        <asp:Label ID="lblFIFilter" runat="server" CssClass="fiHeading floatLeft" Height="24px" BackColor="#26A9E0">Featured Insights</asp:Label>
        <telerik:RadComboBox ID="radComboBoxFIFilter" runat="server" Width="200px" AppendDataBoundItems="false" CssClass="floatRight zIndex5" AutoPostBack="true" ZIndex="5" DropDownCssClass="zIndex5" />
        <asp:Label ID="lblFIFilterBy" runat="server" AssociatedControlID="radComboBoxFIFilter" CssClass="fiFilterLabel floatRight">Filter By: </asp:Label>

    This user control is then used in an ASPX page. The page is using a (non-Telerik, Cyrinx) menu system located in a header control which is located in a master page which the ASPX implements.

    When the ComboBox DropDownList (.rcbSlide) is opened and then the menu system is activated, the DropDownList, but NOT the input box, stays in front of (covers) the menu system. I can confirm that the menu system has a "z-index: 1000;" set to it. In response (shown above) I tried to force all aspects of the RadComboBox to z-index:5. While I can confirm that the RadComboBox attributes are properly setting these style values (via Firebug) they appear to have no effect on who covers who so I still have this problem.

    Can you please recommend other things that I might adjust to get the menu to overlay the ComboBox drop down list when it is open?

      Thanks much,

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Dec 2011 Link to this post

    Hello Gregory,

    Try setting a larger z-index  for the RadComboBox.

  3. Gregory
    Gregory avatar
    6 posts
    Member since:
    Aug 2011

    Posted 09 Dec 2011 Link to this post

    Hello Shinu,
      Setting this higher value did not resolve my issue. I believe the problem is that the actual drop down list container is in a different stacking context than the rest of the page. Please see the code snippet via screen capture of FireFox FireBug. I think this is why the z-index is having no effect on the actual drop down list container.

      Is there a way to control where the actual drop down list html markup gets placed within the page? Why is it just below the FORM field and not contained relative to the RadComboBox placement?

      Thanks much,

  4. Dimitar Terziev
    Dimitar Terziev avatar
    1268 posts

    Posted 13 Dec 2011 Link to this post

    Hi Gregory,

    The drop-down list of the RadComboBox is always placed below its input element and you could not modify this behavior. As I understand you want this drop-down to be show behind the menu and not over it. By default the RadComboBox and its drop-down respectively has z-index of 6000 which is why it's shown over the menu which has z-index 1000. In your case you should apply new  z-index to the rcbSlide div and this index should be less than 1000.

    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. World WIde
    World WIde avatar
    1 posts
    Member since:
    Feb 2019

    Posted 22 Feb 2019 Link to this post

    Useful thread

    Thanks for posting this.

Back to Top