EasyUI Forum
May 20, 2024, 12:53:22 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Panel resize when browser window size changes  (Read 10814 times)
Andy1980
Newbie
*
Posts: 14


View Profile Email
« on: March 07, 2014, 01:20:44 AM »

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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: March 07, 2014, 01:51:04 AM »

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()})
    })
})
Logged
Andy1980
Newbie
*
Posts: 14


View Profile Email
« Reply #2 on: March 07, 2014, 02:29:54 AM »

Thanks a lot.
I has the same idea, but I thought there might be a parameter or something within the panel i didn't see  Smiley

But works fine for me.
Thanks  Smiley
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!