EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Pierre on September 14, 2017, 12:11:09 PM

Title: [SOLVED] Resizing problem
Post by: Pierre on September 14, 2017, 12:11:09 PM

Hello
I made simple example here:
http://code.reloado.com/ecituq3/35/edit#preview
when you run example, datagrid is not resized (width) until you resize browser.
Question is - how to run both datagrid (in both tabs) in full width?
Thank you.

Title: Re: Resizing problem
Post by: jarry on September 14, 2017, 05:21:06 PM

The UIkit renders components after the EasyUI, you have to listen to the UIkit event and do the layout again. For more information please look at this updated example http://code.reloado.com/ecituq3/36/edit

Code:

$(function(){
  $('.uk-switcher').on('show.uk.switcher', function(event, area){
      $('body').panel('doLayout')
  });
});

Title: Re: Resizing problem
Post by: Pierre on September 14, 2017, 10:47:16 PM

Awesome Jarry, thank you so much for your help!
Can you please check your example one more time and tel me why is the width of the datagrid changed each time you change tab?
Please do this:
- navigate here: http://code.reloado.com/ecituq3/36/edit#preview
- click on Members tab (everything is OK now)
- click on Invoices tab - you will see that datagrid width has been changed (on the right side)
- click on Members tab - width is OK

Thank you for your help.

Title: Re: Resizing problem
Post by: Pierre on September 15, 2017, 05:43:47 AM

OK I solved it

I added this:

Code:

  <style type="text/css">
    #bodyDiv { overflow: hidden !important; }
  </style>

and then

Code:

<body id="bodyDiv" style="background-color:white;">

complete example here:
http://code.reloado.com/ecituq3/37/edit#preview