jquery.toolbar with Bootstrap 3.0.3 isn't display correctly.

[ghernandezr]

When I use jquery.toolbar with bootstrap 3.0.3, the button and menu isn't display correctly.

[ghernandezr]

I find a solution doing my own jquery.toolbar.bootstrap3.css and puting this styles:

.btn-toolbar{
    width: 35px;
    height: 35px;
    line-height: 2px;
}
.tool-item{
      width: 35px;
      height: 100%;
}

maybe you can find better solution.

[ihmcjacky]

@ghernandezr Thx for the hotfix, it works perfectly, hope for integrating to master branch

[hoigo]

This worked for me (inside my css file):

• {
  -webkit-box-sizing: content-box;
  }

[smeinecke]

It seems as Bootstrap overwrites default value of box-sizing for all elements by following CSS rule:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

So, you probably have to add:

.tool-container, .tool-item, .btn-toolbar {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

[bzkdjc]

@smeinecke That deserves a Thank you!

[LeShrimp]

This "Fix" does not work if you want to use Bootstrap 3 Button toolbars. I ran into this problem today and wondered about the strange rendering of my Buttons on certain pages.

The problem here is a naming collision with Bootstrap 3: https://getbootstrap.com/docs/3.3/components/#btn-groups-toolbar

Maybe a more satisfying solution would be to rename the .btn-toolbar class to something else?