EasyUI Forum
June 16, 2024, 12:38:57 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: EasyUI and fluid design  (Read 27959 times)
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« 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?
Logged
esteen
Newbie
*
Posts: 5


View Profile Email
« Reply #1 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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #2 on: June 22, 2012, 09:30:06 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?
Logged
baxter
Newbie
*
Posts: 32


View Profile Email
« Reply #3 on: June 25, 2012, 07:06:13 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},
  ]],
});
Logged
Ellipsis
Full Member
***
Posts: 113


View Profile WWW
« Reply #4 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.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!