Print Page - EasyUI and fluid design

Title: EasyUI and fluid design
Post by: Ellipsis on June 14, 2012, 12:29:26 AM

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?

Title: Re: EasyUI and fluid design
Post by: esteen on June 22, 2012, 06:33:26 AM

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?

Title: Re: EasyUI and fluid design
Post by: stworthy on June 22, 2012, 09:30:06 AM

Quote from: esteen on June 22, 2012, 06:33:26 AM

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?

Title: Re: EasyUI and fluid design
Post by: baxter on June 25, 2012, 07:06:13 AM

Quote from: esteen on June 22, 2012, 06:33:26 AM

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},
  ]],
});

Title: Re: EasyUI and fluid design
Post by: Ellipsis on July 12, 2012, 05:28:34 AM

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.

EasyUI Forum

General Category => General Discussion => Topic started by: Ellipsis on June 14, 2012, 12:29:26 AM