Search code examples
jqueryhtmlcsstwitter-bootstrapjqtree

Bootstrap Is Adding Conflicting Styles To JQTree

This first picture is what my jqTree looks like when the page is first loaded:

enter image description here

When I close then re-expand the "USA" node this is what it re-expands to:

enter image description here

Upon inspecting it in Google Chrome debugger:

enter image description here

You can see that for some reason the overflow: hidden was added to the element's style! When I delete/disable this element style the tree works as expected and everything is fine and well.

I also have determined that when I remove the bootstrap css from my header this bug no longer happens.

Does anybody here have any idea why/when/where/how bootstrap is adding this style? I added a DOM breakpoint in chrome to the element (on attribute change), but the style is actually set before the breakpoint even gets hit, so that just leaves me even more confused...

This bug does not happen in firefox.

Help please

Solution

  • That sure is a weird one. The problem seems to be due entirely to the jQTree styles though it might be affected by Bootstrap's default box-sizing. In any case, add these styles to your stylesheet

    ul.jqtree-tree ul.jqtree_common {
    margin-left: 0;
    padding-left: 16px;
}

    The problem was, those arrows were being positioned absolutely with a left: -1.5em which put them outside the parent's box. With overflow:hidden, they weren't visible.

    Something in the JQTree JavaScript adds the overflow property, probably to facilitate the animation.