dhtmlxGrid shrinking when column resized in UI

I am experiencing an issue with the dhtmlxGrid control that I can’t find a solution for. When the grid is being resized in the UI it shrinks. The more it is resized the more it shrinks.

The container is sized to width 100% and height 350px;

<div class="width-100 margin-top-10" id="history-grid" style="height: 350px;"></div>

The grid is initialized with defined column widths

var grid = new dhtmlXGridObject("history-grid");
grid.setImagePath('@Url.Content("~/Scripts/dhtml/imgs/")');
grid.setHeader(",Action Date, Action Time,User,Action,Note,Next Action Date,Next Action Time,Next Action");
grid.setColumnIds("QaLink,ActionDate,ActionTime,UserName,ActionName,Note,NextActionDate,NextActionTime,NextActionName");
grid.setColAlign("center,center,center,center,center,left,center,center,center");
grid.setInitWidths("40,80,80,100,80,225,125,125,80");
grid.enableMultiline(true);
grid.setSkin("dhx_skyblue");
grid.init();

Does anyone have any idea what is going on and how to fix it?

Hi elbean, same problem for me ; did you find some workaround ?

Unfortunately the issue cannot be reproduced locally.

Please, make sure that the sizes for the parent container of the grid are also defined.
If issue still occurs - please, provide with a complete demo, where the issue can be reconstructed.
Here you can find a tutorial:
docs.dhtmlx.com/doku.php?id=othe … leted_demo

I have been doing some troubleshooting and the issue only presents itself when a skin is applied to the grid. I am using dhx_skyblue that was custom from the skin builder as Classic -> Clouds.

Looks like the issue is being caused by bootstrap.css.
Bootstrap.css has this to set the box-sizing:

*, *::before, *::after {
	box-sizing: border-box;
}

It seems to be fixed by changing the box-sizing to:

*, *::before, *::after {
	box-sizing: content-box;
}

Are there any known compatibility issues with Bootstrap 3.0.3?

Thanks for discovering this interference. I recently ran into the same problem and this was the fix.

Since I wanted to ensure bootstrap and border-box remained, I just made sure .gridbox received “content-box” and that seemed to solve it for my case. In one of my own CSS files I just added:

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

Thanks Vanderpoel and others! This is exactly what I needed. I was experiencing this with Bootstrap and didn’t know why!

The same issue occurs for me as well during pagination. Thanks, it save my time.