Resize Panel and its content when browser window resizes

[SkippingAdiParticipant]

Hi
I have a jqxPanel with a tabular layout inside it and a jqxInput the cell with width=100% that should resize when browser window resizes:

http://jsfiddle.net/SkippingAdi/psgphssp/

My idea is, when the brwoser window resizes that the Panel resizes as well and also it’s inner jqxInput resizes as both jqx widgets have set it’s width to 100% and also the cell where the jqxInput is placed in has width=100%. But the jqxPanel does not resize. In opposite I have also placed a jqxInput completely outside my semantic table and it resizes as expected.

Should the jqxPanel not resize automatically when browser window resizes? Did I configure something wrong?

Regards
Adrian

[Peter StoevKeymaster]

Hi SkippingAdi,

See: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpanel/panel-fluid-size.htm?arctic. The panel will resize itself if it’s width is in Percentage. Otherwise, it shouldn’t resize itself when you resize the browser’s window.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SkippingAdiParticipant]

Hi Peter

Thank you for reply.
I don’t know what I do wrong, but as soon as there is Little bit more Content in your jqxPanel then resize does not work in any browser.
I have created a new jsfiddle demonstrating the Problem.

http://jsfiddle.net/SkippingAdi/psgphssp/

First example is a jqxInput with some surounding divs, that resizes automatically.
Second example is a jqxPanel with a jqxInput inside it and some divs surounding it.

Can you have a look at it please.
Thank you
SkippingAdi

P.S.
sorry, the link Feature in this Editor does not work.

[Peter StoevKeymaster]

Hi SkippingAdi,

Why do you put “wrap” mode? In this mode the panel’s size depends only on its content’s size. This is wrong setting if you want the panel to be resized when the browser is resized.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SkippingAdiParticipant]

Hi Peter
Thank you for reply.

I use “wrap” mode, because on this way the Panel nicely adjust the height. If I use ‘fixed’ mode the height is not adjusted as you easily can see when you set “fixed” mode in my jsFiddle above, and don’t supply a height value.
How should one configure this Panel to have Auto resize and also let the Panel adjust it’s height to the Contents height? Because in my Scenario I don’t know the Contents height.

Regards
SkippingAdi

[Peter StoevKeymaster]

You can’t. Both modes have different behavior. You can’t have a panel which is with Percentage Size and at the same time its Size to depend on its content. This can’t happen and will never happen.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SkippingAdiParticipant]

Strange thing I think is, that the jqxTabs Widget handles this without any extra work?
For jqxTabs it’s enough to set it’s width to 100%, keep height unset and it renders like the jqxPanel should.

The difference between the two is that jqxPanel initial width and height are null, but for jqxTabs it’s initial width and height are set to ‘auto’.
On the other Hand jqxPanel seems to ignore width and height set to ‘auto’?

Can you explain why Peter? Is that a flaw in your widgets design?

Thank you
SkippingAdi

[Peter StoevKeymaster]

Hi SkippingAdi,

We don’t support “auto” width & height. In jqxTabs, they are just not set. This is not a flaw in the design. This is how this widget should work with that setting. Sorry, if it does not meet your requirements.

Have a nice day!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts