Treegrid height decreases automatically when a column is res

Suite and Optimus Suite 5
#1

I have a strange problem .

The treegrid initialization is given below


            <div class="panel-body">
                <div style="height: 300px;" class="text-center loader" id = "loader">
                    <i class="fa fa-spinner fa-pulse fa-5x" style="position: relative;top: 40%;transform: translateY(-40%);color: lightblue;"></i>
                </div>              
                <div id = "averagesChart" class="col-md-12 col-sm-12 col-xs-12" ></div>
                <div id = "averagesTable" style="height:300px;width:100%;position:relative;background-color: white;overflow:hidden;padding:0px;" class="col-md-12 col-sm-12 col-xs-12" ></div>
            </div>




        dhxTreeGrid = new dhtmlXGridObject("averagesTable");

        

        with(dhxTreeGrid){

            setHeader("Group/KPI,Score,<?=$account->name ?> Average,%Δ,&nbsp;",null,["text-align:left;font-size:14px","align:center;text-align:center;font-size:14px","align:center;text-align:center;font-size:14px","align:center;text-align:center;font-size:14px","text-align:center;"]);
            setIconsPath(dhx_iconpath); //only used if not default icons used for the group/kpi(otherwise comment it)
            setInitWidths("250,75,175,75,*");
            enableResizing("true,true,true,true,true");
            setColAlign("left,center,center,center,left");
            enableAutoWidth(true);
            //enableColumnAutoSize(true);
            setColTypes("tree,ro,ro,ro,ro");
            setColSorting("str,int,int,str,na");
            setImageSize(1,1);
            setEditable(false);
            setColVAlign("text-bottom,text-bottom,text-bottom,text-bottom,text-bottom");
            init();
        };
        dhxTreeGrid.attachEvent("onOpenEnd", function(index,state){// save the groups that were open
            //minimal parameters set
            dhxTreeGrid.saveOpenStates();
        });        
        dhtmlxEvent(window, "resize", function () { 
            //resize grid size on container size change
            dhxTreeGrid.setSizes(); 

        });

When I drag/resize any column, the grid height starts shrinking. Regardless of whether I expand or reduce the column width
with the mouse the treegrid shrinks. Any idea whats the issue guys ?
We are using the dhtmlx 5.0 pro on web layout with skin.

resizeproblem.png1828×107 5.01 KB

#2

Guys any suggestion or help on this?
I’m having a tough time with this issue. when i checked the dhtmlx container div height is decreasing gradually when we drag any column to resize it.
I used this workaround which restores the size but it looks pretty awkward…Any help ?

dhxTreeGrid.attachEvent("onResizeEnd", function(obj){
            $('#averagesTable').height(300);
            dhxTreeGrid.setSizes(); 
        });
#3

Please, make sure that you have a valid doctype on your page:

If the problem still occurs for you please, provide with a complete demo, where the problem can be reconstructed locally.

#4

The doctype is correct and the same that you mentioned.

I dont know the actual reason why it happened, but i put the grid inside a
dhtmlx layout ‘1C’ pattern and the issue seems to have resolved.

#5

The solution with placing the grid in the layout is valid but if it doesn’t suit you please, provide with a simple complete demo, where the problem can be reconstructed.