Display overflow problem with scroll bar

4 posts, 0 answers
  1. Henry
    Henry avatar
    2 posts
    Member since:
    Mar 2011

    Posted 15 Mar 2011 Link to this post

    I have a page banner that is fixed on the top of the web site regardless the scroll position of the window:

    <div id="DivHeader" runat="server" style="position: fixed; top: 0; left: 0; right: 0;">
            <asp:Table ...>
              content
            </asp:Table>
    </div>

    Then I have a long  table with the RadDockZones and RadDocs controls underneath the header. Then when I scroll down, the table along with the table content hides behind the banner as it suppose to do. As you can see half of the word "sdfsdf" hides behind the banner along with the table borders. However the telerik ajax controls don't. And it's even not only the RadDock that does not hide behind the banner. It's also the telerik menu control as you can see in the upper left corner of the screen shot.
    Any idea how i can get around this problem?
    This only has to work in IE7.

    Thank you very much.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Mar 2011 Link to this post

    Hello Henry,

    I believe this problem to be related to the well-known "position: relative" and overflow bug in IE6 and 7 as described in: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/. The docking zone has position: relative, and if it is placed in a parent element that can be scrolled, it will appear as going outside the parent's boundaries in IE6 or 7. Setting position: relative to the parent resolves the issue. So please set position: relative, to the parent element and see if the problem is resolved.
    If this does not help in resolving the issue, could you please send us a sample runnable project that shows the problem, so we can debug it locally? You could also provide a live URL where the issue can be observed.

    Greetings,
    Pero
    the Telerik team
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henry
    Henry avatar
    2 posts
    Member since:
    Mar 2011

    Posted 17 Mar 2011 Link to this post

    Thank you for looking into this.

    The "position:relative" didn't do it. Also I didn't know where to add it. To the DivHeader tag? I tried and it didn't do anything.

    However I got a hint from someone else. When I added " z-index: 100;" to the "DivHeader" so it looks like:

    <div id="DivHeader" runat="server" style="position: fixed; top: 0; left: 0; right: 0; z-index: 100;">
            <asp:Table ...>
              content
            </asp:Table>
    </div>

    It works for at least the "RadDockZone" which hides now behind the banner. However the "RadMenuItem" ajax control still floats on top of the banner. See image: The menu "Select / Role" still floats in front of the banner which needs to be fixed. The "RadDockZone" now hides behind the banner as it suppose to do.

    Any idea how to fix that?

    Thank you
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Mar 2011 Link to this post

    Hi Henry,

    What about setting a greater value for the z-index to the "DivHeader"? The menu has a default z-index of 7000, so using a greater value might  help.
    If the issue is not resolved, could you please send us a code sample or a live URL, that demonstrates the issue, and we will do our best to help?

    Kind regards,
    Pero
    the Telerik team
Back to Top