How to debug a bootstrap + dhtmlxgrid CSS conflict

Question

I have a Rails 4.2 app with JQuery, Bootstrap and dhtmlx.

Now if I create a dhtmlXGrid on a page, the grid appears.

But if I change the column size with the mouse, the entire grid size decreases. (strange bug)

If I remove the class gridbox from the #gridbox div (after page loading with chrome developper Tools) the bug disappears but the style also (of course!).

If I remove the bootstrap css the grid work properly (but of course bootstrap navbar not!)

How to debug this behavior?

I search the gridbox class in bootstrap but it does'nt exists. So how to know what is causing the grid to be resized?

I have a test zip with an example just open the html.html file:

dropbox

Answer 1

I found a solution here : dhtmlx forum

just add some css in application.css (or application.css.scss)

div.gridbox {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

There is another problem : the horizontal scroll bar is always displayed