EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on March 06, 2013, 09:49:29 PM

Title: on resize, resize all children
Post by: devnull on March 06, 2013, 09:49:29 PM

Is it possible to globally run the resize() method on all easyui-object children when the containing panel is resized ??

Code:

    $('#center').panel({  
	    onResize:function(){  
	        //$(this).easyui.resize
	    }  
	});

Title: Re: on resize, resize all children
Post by: stworthy on March 06, 2013, 11:28:52 PM

Set the 'fit' property to true for a component and it will be automatically resized when its container panel is resized.

Title: Re: on resize, resize all children
Post by: devnull on March 07, 2013, 05:31:36 AM

Thanks;

fit=true is already set on the datagrid in the main panel, but when the left hand menu panel is collapsed or resized, the datagrid does not re-size to the new full width of the main panel.

Title: Re: on resize, resize all children
Post by: stworthy on March 07, 2013, 08:08:31 AM

Please refer to this sample http://www.jeasyui.com/demo/main/index.php?plugin=Layout&theme=default&dir=ltr&pitem=Basic. When the left panel is collapsed or resized, the datagrid is automatically resized to full fill its container space.

Title: Re: on resize, resize all children
Post by: devnull on March 08, 2013, 01:02:52 AM

Thanks, it only appears to work when the datagrid is the first element in the container.

Take a look at this: http://jsfiddle.net/Chqxu/1/

Thanks

Title: Re: on resize, resize all children
Post by: stworthy on March 08, 2013, 02:51:56 AM

Here is the updated example that solved your issue.
http://jsfiddle.net/Chqxu/2/

Title: Re: on resize, resize all children
Post by: devnull on March 08, 2013, 04:06:21 AM

Thanks so much for helping, unfortunately that only works if the datagrid is the first element in the form, but in most cases it is not there are other elements above it.

See updated fillde: http://jsfiddle.net/Chqxu/7/

Title: Re: on resize, resize all children
Post by: stworthy on March 09, 2013, 07:15:36 AM

Here is the updated example http://jsfiddle.net/Chqxu/10/ that using nested layout to solve your issue.