Using a Percent for Height - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: %, content, height, jqxwindow, minHeight, percent, percentage, resize, window

This topic contains 8 replies, has 3 voices, and was last updated by BrentH 10 years, 1 month ago.

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

Author

Using a Percent for Height Posts

September 30, 2014 at 7:59 pm 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

October 1, 2014 at 5:24 am 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/

October 1, 2014 at 3:29 pm 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>

October 2, 2014 at 5:48 am 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/

October 2, 2014 at 6:57 pm 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/

October 2, 2014 at 8:30 pm 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

October 2, 2014 at 8:37 pm 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.

October 3, 2014 at 4:16 am 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/

November 7, 2014 at 2:55 pm Using a Percent for Height #62388

BrentH

Participant

Thanks

This last sample is only missing:

$(window).resize(function () {
    ...
    $('toolBoxWindow').jqxWindow({ height: $(window).height()/2 });
});

Author

Posts

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

You must be logged in to reply to this topic.