jqxWindow resize

[nagaveniParticipant]

I am using jqxWindow modal popup and I need to make it as ‘resizable’ hence I removed the following “resizable: false” setting from modal popup settings. But I am facing an issue regarding this re-size.

Currently my jqxWindow modal popup settings are like below.
function model_jqxPartialWindow() {
this.Settings = {
minWidth: ‘100px’,
maxWidth: ‘100vw’,
minHeight: 200,
maxHeight: ’96vh’,
width: 1300,
isModal: true,
resizable: false,
modalBackgroundZIndex: 9999,
keyboardCloseKey: 123,
title: “New”,
}
}

Here once I removed ‘resizable:false‘ setting and by default resizable is ‘true’ for jqxWindow so I can able to resize popup.

But for window re-size, I need to set height and width to fixed values and I need to remove maxHeight and maxWidth properties.

I have verified JSFiddle link and I found that default max-width for jqxWindow modal popup is ‘800px’ i.e. even if you set more width, it will take ‘maxWdith’ as ‘800px’ only.

But in my requirement current popup width is ‘1300px’ and I am using maxHeight and maxWidth properties to maintain this width. But for resize, I need to set height and width to fixed values and need to remove maxHeight and maxWidth properties.

If I remove these maxHeight and maxWidth properties, it will take ‘800px’ width only. And if I set maxWidth or minWidth properties, Then while re-sizing the window, I am unable to get scroll bar to show that entire modal content.

I have already checked in jqwidgets JSFiddle and confirmed the above and please check the below link for your reference.
http://jsfiddle.net/JFWz6/65/

So, provide me a solution for the above.

Thanks,

Nagaveni

[HristoParticipant]

Hello Nagaveni,

Your way is suitable.
In case of resizable: true, only set

maxWidth: '100vw',
maxHeight: '100vh',

But in case when use width: 1300 in smaller frame (like as fiddle – result).
“jqxWindow” will be generated in existing frame. With 100% width of that frame.
Please take a look this example: http://jsfiddle.net/txhi/wgm6b3fd/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[nagaveniParticipant]

Thanks for your reply and I checked that link. Here As per my requirement, I changed resizable: true and while I am re-sizing the modal popup, the content is cut off i.e. window scroll is not getting.

Please check the following updated link and provide us solution as soon as possible.

http://jsfiddle.net/wgm6b3fd/6/

[HristoParticipant]

Hello Nagaveni,

Sorry for this misunderstanding. We do not support those CSS units (ex. vh and vw).
Set maxWidth and maxHeight to some bigger value.
Please take a look this example: http://jsfiddle.net/ny7ozdd5/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[nagaveniParticipant]

Hi,

Thank you for your reply. If you support these CSS units in upcoming versions, please update on this.

Thank you
Nagaveni

[chandrika.sharmaParticipant]

Hi,
I am using jqxWindowComponent of Angular2. This is working fine for me except the resizing functionality. I want to resize the window only from bottom right corner as in eg: https://jqueryui.com/resizable/.
Is it possible to do that?

[HristoParticipant]

Hello chandrika.sharma,

Unfortunately, no such option (by default in the jqxWindow).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts