3

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

Ring
  • 2,249
  • 5
  • 27
  • 40
  • It won't be the `overflow` or any other CSS added directly to the element. Chances are, the `overflow:hidden` is just exposing some style bugs introduced by other styles (margins, padding, etc). You'll probably just need to override those bootstrap styles that cause the problem. – Phil Mar 06 '14 at 22:36
  • Are there any other suggestions you can give to help me debug and figure out whats causing it? I can give a link to a live demo if needed – Ring Mar 06 '14 at 22:37
  • Yes, in the *Styles* tab, disable the Bootstrap styles for the lists / list items one-by-one until it looks right. Then work out the right values to use and add those as overrides to your stylesheet – Phil Mar 06 '14 at 22:38
  • I've tried that already, and I also did it for every single parent element as well. Needless to say it did not fix the problem. – Ring Mar 06 '14 at 22:39
  • Post the live link then – Phil Mar 06 '14 at 22:39

1 Answers1

3

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.

Phil
  • 157,677
  • 23
  • 242
  • 245
  • The overflow property is not being added by jqTree, when I remove the bootstrap CSS it fixes the problem (and I've also searched through their source). However, I think you're right that something simple like bootstrap's box-sizing may be triggering it. I have a hunch that the overflow style was actually added by Google Chrome as an attempt by the browser to fix the existing problems with the styles you mentioned. That being said, THANKS A BUNCH FOR YOUR HELP! – Ring Mar 06 '14 at 23:13
  • 1
    @Ring I think the `overflow` style is set in jQuery's `slideUp` animation function. – Phil Mar 06 '14 at 23:18