jQuery UI Widgets Forums Dialogs and Notifications Window Using a Percent for Height

This topic contains 8 replies, has 3 voices, and was last updated by  BrentH 8 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Using a Percent for Height #60393

    BrentH
    Participant

    In my set up I would like the height to be a percent as such:

    $('#layersWindow').jqxWindow({ width: 320, height: '75%', resizable: true, autoOpen: false });

    This works great for the outer boundary, but the form’s content doesn’t resize as I change the browser size. Any ideas?

            <div id="layersWindow">
                <div id="layersWindowHeader">
                    <span id="captureContainer" style="float: right">Layer Controls and Legend</span>
                </div>
                <div id="layersWindowContent" style="height: 100%" >
                    Content...
                </div>
            </div>

    Thanks

    • This topic was modified 8 years, 8 months ago by  BrentH.
    Using a Percent for Height #60409

    Dimitar
    Participant

    Hello BrentH,

    What kind of content do you have in your window? We would like to test for the reported behaviour with it. Please also note that the window’s height can be no less than its minHeight setting.

    Best Regards,
    Dimitar

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

    Using a Percent for Height #60479

    BrentH
    Participant

    My content is a tree view.
    You can see the issue with this script (it’s as short as I can make it). You can drag the bottom of the browser up and down to see the issue. You lose elements from the tree view. There is one image in there, but the source is irrelevant – just point to anything.

    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="keywords" content="Sample Content Not Resizing" />
        <title id='Description'>Sample Content Not Resizing</title>
    
        <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery-1.11.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" src="../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxsplitter.js"></script>
    
        <script type="text/javascript">
            var _layerwinpos = 0;
            var geoViewDemo = (function () {
                var _collapsed = false;
    
                function _addEventListeners() {
                    $('#OpenToolBoxWindow').mousedown(function () {
                        $('#toolBoxWindow').jqxWindow('expand');
                        $('#toolBoxWindow').jqxWindow('open');
                    });
                };
    
                function _createWindows() {
                    $('#toolBoxWindow').jqxWindow({ width: 320, height: '50%', resizable: true, autoOpen: false });
                    $("#toolBoxWindow").jqxWindow('move', 40, 4);
                };
    
                function _createLayersTree() {
                    $('#jqxTree').jqxTree({ height: '100%', width: '100%', hasThreeStates: false, checkboxes: false });
                    $("#jqxTree").jqxTree('selectItem', $("#home")[0]);
                };
    
                return {
                    init: function () {
                        _createWindows();
                        _createLayersTree();
                        _addEventListeners();
                    }
                };
            } ());
    
            $(document).ready(function () {
                geoViewDemo.init();
            });
    
        </script>
    
    </head>
    
    <body class='default'>
    
                <img id="OpenToolBoxWindow" style="position: absolute; top: 4px; left: 4px; visibility: visible; width: 30px; height: 30px" 
                    src="../Images/ExpandContract/toolbox48.png" alt="Show Toolbox" />
                <div id="toolBoxWindow">
                    <div id="toolBoxWindowHeader">
                        <span id="captureContainer" style="float: left">Map Tools</span>
                    </div>
                    <div id="toolBoxWindowContent" style="height: 100%;">
                        <div id='jqxTree'>
                            <ul>
                                <li id='home'>Home</li>
                                <li id="solutions" item-checked='true' item-expanded='true'>
                                    Solutions
                                    <ul>
                                        <li id="education">
                                            <input type="checkbox" style="padding: 0px; margin: 0px;"></checkbox>
                                            Education</li>
                                        <li id="financial services">
                                            Financial services</li>
                                        <li id="government">
                                            <img style='float: left; margin-right: 5px;' src='../images/calendarIcon.png' /><span
                                                item-title="true">Calendar</span>
                                        </li>
                                        <li item-checked='false'>Manufacturing</li>
                                        <li>Solutions
                                            <ul>
                                                <li>Consumer photo and video</li>
                                                <li>Mobile</li>
                                                <li>Rich Internet applications</li>
                                                <li>Technical communication</li>
                                                <li>Training and eLearning</li>
                                                <li>Web conferencing</li>
                                            </ul>
                                        </li>
                                        <li>All industries and solutions</li>
                                    </ul>
                                </li>
                                <li>Products
                                    <ul>
                                        <li>PC products</li>
                                        <li>Mobile products</li>
                                        <li>All products</li>
                                    </ul>
                                </li>
                                <li>Support
                                    <ul>
                                        <li>Support home</li>
                                        <li>Customer Service</li>
                                        <li>Knowledge base</li>
                                        <li>Books</li>
                                        <li>Training and certification</li>
                                        <li>Support programs</li>
                                        <li>Forums</li>
                                        <li>Documentation</li>
                                        <li>Updates</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
    
    </body>
    </html>
    Using a Percent for Height #60508

    Dimitar
    Participant

    Hi BrentH,

    Thank you for your feedback. We will investigate this behaviour and if we confirm it as an issue, we will fix it as soon as possible.

    Best Regards,
    Dimitar

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

    Using a Percent for Height #60538

    Peter Stoev
    Keymaster

    Hi guys,

    The content in jqxWindow depends on the size of jqxWindow, not on the size of the browser’s window and that is because the container of the jqxWindow’s content is jqxWindow. This means that if you resize the browser’s window in that case, nothing should happen. Sample based on your code: http://jsfiddle.net/jqwidgets/e2kwj4r0/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Using a Percent for Height #60546

    BrentH
    Participant

    Your sample shows the same thing that I showed in my sample. You didn’t fix anything.

    Using your link in the previous post, Open up all of the tree nodes and scroll to where you can see “Documentation” and “Updates”.
    Then grab the bottom of your browser and drag it halfway up your monitor screen.
    Now try to access “Updates” or “Documentation”
    Do you see the real issue now?

    Brent

    • This reply was modified 8 years, 8 months ago by  BrentH.
    Using a Percent for Height #60551

    BrentH
    Participant

    OK, I tried it in Chrome and it works, but in IE 10 the problem still exists. Haven’t tried another browser.

    Using a Percent for Height #60568

    Peter Stoev
    Keymaster

    Hello BrentH,

    Ok, update this fiddle one more time: http://jsfiddle.net/1owwvLxc/. If we find erroneous behavior on our side, we will add a work item about it for a future jQWidgets update.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Using a Percent for Height #62388

    BrentH
    Participant

    Thanks

    This last sample is only missing:

    $(window).resize(function () {
        ...
        $('toolBoxWindow').jqxWindow({ height: $(window).height()/2 });
    });
    • This reply was modified 8 years, 6 months ago by  BrentH.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.