Print Page - Panel resize when browser window size changes

Hi all,

i have the following panel:

Code:

<body>

	<div id="p" class="easyui-panel" title="My Panel" data-options="collapsible:true">
					<p>Panel Content.</p>
					<p>Panel Content.</p>
					<p>Panel Content.</p>
        </div>
					<p>asdasdasdasda</p>
					<p>Padasdadasdadasd</p>
</body>

When i now open the browser everything is fine and it fits perfectly
The Problem is, when i resize the browser window, the panel just don't resize.

see images small and big.jpg

What can i do the resize that panel?

The Problem is inside the panel: When it's generated it appears like this:

<div class="panel" style="width: auto; display: block;">
<div class="panel-header" style="width: 517px;">
<div title="" class="easyui-panel panel-body" id="p" style="width: 527px; height: auto;" data-options="collapsible:true">
</div>

If it would be possible to change this to width:auto it would work.
But i can't figure it out?

Any help, thanks.

Please catch the 'resize' event of window and resize the panel's width according to its parent container.

Code:

$(function(){
    $(window).resize(function(){
        $('#p').panel('resize',{width:$(this).parent().width()})
    })
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Andy1980 on March 07, 2014, 01:20:44 AM