Layout overlap with Menu

4 posts, 0 answers
  1. Neil
    Neil avatar
    16 posts
    Member since:
    Mar 2007

    Posted 13 Mar 2008 Link to this post

    I've got a RadGrid below a RadMenu, and there seems to be some wierd overlap happening. In Firefox, I get a gray box partially behind the menu, and the contents of the grid are shoved to the right of the menu. I suspect the gray box is supposed to be the Grid's div, since the box and the grid text seem to line up pretty well.

    It's also broken in IE, though it appears differently. In IE the gray box is still underneath the menu, but it is almost entirely covered by the grid contents. The grid contents are below the menu, not to the right as in Firefox.

    A picture of the Firefox bug:

    The IE bug (note the circled area where the gray box is visible):
  2. Neil
    Neil avatar
    16 posts
    Member since:
    Mar 2007

    Posted 14 Mar 2008 Link to this post

    Apparently this is a RadMenu bug. In messing around with the problem, I've noticed that if I replace my Grid with other controls, they show the same behavior.

    Via the awesome Firebug extension for Firefox, I was looking through the styles and discovered that removing "float: left;" from .RadMenu fixed it.
  3. Aaron Lewis
    Aaron Lewis avatar
    22 posts
    Member since:
    Jan 2003

    Posted 09 Apr 2008 Link to this post

    If anybody wants to use the fix that Ralph found without having to use a custom skin or move away from the embedded ones just yet, you can put the following in your code-behind (kinda hacky, but avoiding custom skin/more files to deploy):

    radMenuName.Style.Add("float", "none");
  4. Nate
    Nate avatar
    4 posts
    Member since:
    Aug 2008

    Posted 21 Oct 2008 Link to this post

    The issue I found was that .RadMenu was set to z-index: 7000;  Just set it to 1 in the CSS file.

    Great job bring up firebug.  I already used it, but didn't think about the inspector.  That probably saved me a ton of time.
Back to Top