Dynamic Height for Window - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: auto, dynamic, grid, height, jqxwindow, setContent, toggle, window

This topic contains 9 replies, has 6 voices, and was last updated by Dimitar 10 years, 7 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Dynamic Height for Window Posts
August 11, 2012 at 10:22 pm Dynamic Height for Window #6731

rfladebo2
Member

We have a jqxWindow modal whose content is determined based on which link a user clicks, and the content varies in height. Specifically we have a description of the item which can vary from a few words to a few paragraphs.

The jqxWindow <div> contains a “header” which has a photo of fixed height. The main content <div> contains the description.

The link that spawns the jqxWindow modal also contains a call to a function that writes out the description to the bottom <div> using the jQuery .html() function. This content is written out prior to spawning jqxWindow.

When that window pops up, given the varying height of the description, sometimes the description will be cut off (we are using overflow-y: hidden as our style for the content <div>) since it’s height exceeds the calculated height of the jqxWindow.

We tried calling jqxwindow with height: auto, but that didn’t work.

We currently have a workaround for this issue where we write out the description into a <div> that the user can’t see, get the height of that <div>, then calculate the height that we want for the jqxWindow (static header height + calculated content height), then set the jqxWindow height to that when we spawn the window.

Is there a better way that we can do this?

Thanks!

August 13, 2012 at 10:45 am Dynamic Height for Window #6743
Dimitar
Participant
Hello rfladebo2,

To set the height of the window dynamicly you need height: ‘auto’ and you also need to set the content of the Content div before you create the jqxWindow. Here is an example with two buttons. The first one sets the content and creates the window and the second one – vice versa. You can clearly see the difference.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Window CSS Styling Sample</title>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css"/>
<style type="text/css">
#cntnt
{
overflow-y: hidden;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn1").click(function(){
            $("#cntnt").html("In this case, the content is set first, then the jqxWindow is created. Height: 'auto' works properly.");
            $("#jqxwindow ").jqxWindow({ height: 'auto', width: 150, theme: 'summer', isModal: true }).css({ "visibility" : "visible" });
        });
        $("#btn2").click(function(){
            $("#jqxwindow ").jqxWindow({ height: 'auto', width: 150, theme: 'summer', isModal: true }).css({ "visibility" : "visible" });
            $("#cntnt").html("In this case, the jqxWindow is created first, then the content is set.");
        });
    });
</script>
<div id="buttons">
<button id="btn1">First case - proper height</button>
<button id="btn2">Second case - improper height</button>
</div>  
<div id='jqxwindow' style="visibility:hidden">
	<div id="hdr"><img src="MyPicture.jpg" width="120" height="30" /></div>
	<div id="cntnt">Initial content - does not show.</div>
</div>
</div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
October 26, 2012 at 12:50 pm Dynamic Height for Window #10090

tswart
Member

Hi Dimitar,

Thanks you for sharing this code. I understand what you are saying and this has fixed my problem.

But the window is only showing once. When I close the window, you can press the button’s, but no new window is showing. What is casing this behavior? And how can I fix this so the window is showing every time a button is pressed?

Thanks in advance.

Ton Swart

October 26, 2012 at 12:52 pm Dynamic Height for Window #10091

Peter Stoev
Keymaster

Hey guys,

Here’s a demo which shows how to close and show a window: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/jquery-window-events.htm?classic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 26, 2012 at 1:21 pm Dynamic Height for Window #10107

tswart
Member

Thanks you for your input, but how do you use a close and show window when the content is dynamic and you want to use the autoheight function??

For a dynamic content you have to load the content first before creation. So I can’t use the creation of the wiindow and then use the show hide method. So your example does’nt exactly apply to my question.

Greetz.

October 26, 2012 at 1:31 pm Dynamic Height for Window #10109

Peter Stoev
Keymaster

Hi tswart,

The ‘setContent’ method allows you to replace the existing content with a new one.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 8, 2013 at 6:14 pm Dynamic Height for Window #26513

uscore713
Member

But using the ‘setContent’ method does not allow the auto height feature to work properly.

Not only that, but if you have a dialog that actually adds content to itself dynamically, the auto height feature doesn’t work, either.

The standard jQuery-UI dialog widget works perfectly, first time every time. How is it jqxWindow is so difficult to work with? (Perhaps a rhetorical question at best.)

August 8, 2013 at 6:41 pm Dynamic Height for Window #26514
Peter Stoev
Keymaster
Hi uscore713,

I do not know how you use the widget, but the below code works perfectly and the height is automatically adjusted after clicking the button:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function () {
            $('#window').jqxWindow({ width: 200 });
            $("#button").click(function () {
                $('#window').jqxWindow('setContent', 'Very Long Content, Very Long Content, Very Long Content, Very Long Content');
            });
        });
    </script>
</head>
<body class='default'>
       <input type="button" value="Show" id="button" />
        <div id="window">
            <div>Title</div>
            <div>Content</div> 
       </div>
</body>
</html>
```
Here’s a bit more complicated sample with different content set by different buttons which also demonstrates that ‘setContent’ will auto adjust the window’s height.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function () {
            $('#window').jqxWindow({ width: 200 });
            $("#button").click(function () {
                $('#window').jqxWindow('setContent', 'Very Long Content, Very Long Content, Very Long Content, Very Long Content');
            });
            $("#button1").click(function () {
                $('#window').jqxWindow('setContent', 'Very Long Content, Very Long Content, Very Long Content, Very Long Content Very Long Content, Very Long Content, Very Long Content, Very Long Content');
            });
        });
    </script>
</head>
<body class='default'>
       <input type="button" value="Show" id="button" />
       <input type="button" value="Show" id="button1" />
        <div id="window">
            <div>Title</div>
            <div>Content</div> 
       </div>
</body>
</html>
```
Please, look at this topic: http://www.jqwidgets.com/community/topic/welcome-to-jqwidgets-forum-2/ in case you wish to report something in the future.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
May 7, 2014 at 4:13 pm Dynamic Height for Window #54128

mario santanche
Participant

Is it possible to put a Grid (jqxgrid) in jqxWindow and use a method like ‘setcontent’ to toggle two grids?
Thanks in advance.
Mario

May 10, 2014 at 7:20 am Dynamic Height for Window #54317

Dimitar
Participant

Hello Mario,

We suggest that in your window you have a jqxTabs with a grid in each of its two tabs. For an example on how to integrate widgets into tabs, please check out the demo Integration with other widgets.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.