SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tree based menu overlap with footer

    Hi all,

    I'm using a jquery tree menu to bring some dynamic data from a db. When the menu is expanded the list is big enough and overwrite the footer.
    Instead of moving the footer lower down the tree menu goes above the footer.
    I've attached a screenshot to get an idea. I just removed the data.

    The script is using the checkboxtree plugin and relevant css is:

    .ui-widget-daredevel-checkboxTree li{
    list-style-type:none;
    position:relative;
    }
    .ui-widget-daredevel-checkboxTree li span{
    cursor:default;
    position:absolute;
    top:1px;
    left:-16px;
    }

    Any help is much appreciated.overlap1.jpg

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The menu is placed absolutely and therefore will overlap anything in the way (which is what you usually want in a drop menu type of thing) and therefore there is nothing you can do about it overlapping the footer.

    You would need to place the menu back in the flow if you want it to push content downwards but that all depends on the structure of the page and what exact behaviour you are after.

    If you change the position absolute to position:relative it may put the menu in the flow but without full code to work from it's just a rough guess. Of course that means as soon as the menu opens it will push all page content down that sits below it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •