EasyUI and fluid design

[Ellipsis]

It seems that a lot of easyUI have hardcoded inline styles for width and height.

How well does it handle fluid designs, during some experiments with easyUI we where forced to do a hard refresh every time we resized the screen.

What are the future plans for this?

[esteen]

We have the same problem, we do not want to be forced the recalculate panes when the browser windows changes size. What for solution do you offer?

[stworthy]

do not want to be forced the recalculate panes when the browser windows changes size

Do you give a simple example to explain this issue?

[baxter]

We have the same problem, we do not want to be forced the recalculate panes when the browser windows changes size. What for solution do you offer?

i use this function:

Code:

function getWidth(percent){  
    return $(window).width() * percent;  
}  
function fixWidthTable(percent){  
        return getWidth(0.75) * percent;  
}

$('#grid').datagrid({
  ....
  width: getWidth(0.6),
  columns:[[  
	    {field:'name', title:LG831, width:fixWidthTable(0.15), sortable:true},
	    {field:'bluba', title:LG832, width:fixWidthTable(0.15), sortable:true},
  ]],
});

[Ellipsis]

We have found a 'solution', not very pretty but it will suffice for now.

The datagrid extends from Panel, so we used the Panel properties to set custom Classes:

Code:

cls 	        string 	Add a CSS class to the panel. 	        null
headerCls 	string 	Add a CSS class to the panel header. 	null
bodyCls 	string 	Add a CSS class to the panel body. 	null

The custom class we used:

Code:

.fullWidth{width:100% !important;}

The parent divs / wrappers all use percentages to set their width and/or height.
The easyui created inline style for width is overruled by the class fullWidth.
Setting Custom classes for the datagrid wrappers wasn't possible, it would be a welcome addition. Now we had to style these differently.