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.

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.