How to auto-resize jqxWindow based on content?

Question

I have dynamic content inside of a jqxWindow element.

How do I resize the jqxWindow on demand in order to auto-size to the content?

You can use .jqxWindow({height: 'auto'}) but it only works on initialization.

Answer 1

I ended up accomplishing this with the following technique.

1. inject a div to serve as a marker at the bottom of the dynamic content

2. get the new height using jquery with .position().top

3. resize using .jqxWindow()

For example:

// inject marker at bottom of dynamic content
// (i.e., during page initialization)
$('#myWindow').find('.jqx-window-content').append('<div id="bottomOfContent"></div>');

// get new height based on position of marker
var newHeight = $('#bottomOfContent').position().top + 100;

// apply new height
$('#myWindow').jqxWindow({height: newHeight});

Notes:

1. the code should be optimized for performance (caching, efficient lookups, etc -- above code is just for the idea).

2. don't forget to wait for dynamic content to be added before checking top position of the marker

3. if for some reason you need to inject the marker each time you want to resize, don't forget to remove the marker after the resize