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.