jQWidgets Forums

Tagged: Angular splitter, bootstrap splitter, javascript splitter, jquery splitter, jqwidgets splitter, jqxsplitter

This topic contains 1 reply, has 2 voices, and was last updated by Hristo 8 years, 9 months ago.

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

Author

Dynamically resize height as content changes Posts

July 13, 2016 at 10:40 am Dynamically resize height as content changes #85706

SKIDD

Participant

I am dynamically loading content to splitter panels and need the splitter to change its height based on the height of the content. I started with your “jqxSplitter Fluid Size Example”, which seems to set the height and width of the splitter to the height and width of the body of the document. In my case, I have other controls on the page, so need the splitter to get taller as content is added. I can’t seem to figure out how to get this to work.

I have created a basic example which simply has a button (to append content), and a splitter. I’ve set the min-height of the splitter to 100px (as without it, the splitter seems to have a 0px height). I’ve also added an additional div underneath the splitter to demonstrate how I would like to the splitter to resize itself. When the user clicks the “Add Something” button, the word “Appended” is added to both the splitter panel and the additional div at the bottom. By running this sample you should see that as more “Appended”s are added to the div at the bottom, the div grows in height, where the splitter stays at exactly the same size with the content disappearing.

I understand I could place vertical scrollbars on the splitter panels, but don’t really want them, I really need the splitter to resize as content is added. Is this possible to achieve? If so, where am I going wrong?

Thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxSplitter Fluid Size Example. The width and height of the Splitter in this demo are in Percentages.</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <meta name="description" content="Responsive Splitter Example. In this example, the Splitter is with fluid size" />
    <link rel="stylesheet" type="text/css" href="~/Content/jqx.base.css" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jqx-all.js"></script>
    <style>
        html, body {
            width: 100%;
            /*height: 100%;
            overflow: hidden;*/
            padding: 3px;
            box-sizing: border-box;
            margin: 0;
        }
        #splitter {
            min-height:100px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#splitter').jqxSplitter({
                width: '100%',
                height: '100%',
                orientation: 'vertical',
                panels: [
                   { size: "50%", min: "10%", collapsible: false },
                   { size: '50%', min: "5%" }]
            });

            $('#nested2').jqxSplitter({
                width: "100%", height: "100%", panels: [
                    { size: 200 }]
            });
            $('#nested1').jqxSplitter({
                orientation: 'horizontal', width: "100%", height: "100%", panels: [
                    { size: "60%" }]
            });
        });
        $(document).on("click", "#addsomething", function () {
            $("#nested2>div").append("<span>Appended</span><br />");
            $("#additional").append("<span>Appended</span><br />");
        });
    </script>
</head>

<body class='default'>
    <button id="addsomething">Add Something</button>
    <div id="DIV1" style="width: 100%; height: 100%;border:1px solid blue;">
        <div id="splitter">
            <div>
                <div id="nested2">
                    <div>
                        Nested 2.1<br />
                    </div>
                    <div>
                        Nested 2.2<br />
                    </div>
                </div>
            </div>
            <div>
                <div id="nested1">
                    <div>
                        Nested 1.1<br />
                    </div>
                    <div>
                        Nested 1.2<br />
                    </div>
                </div>
            </div>
        </div>
        <div id="additional" style="border:1px solid red;">
            <span>Initial</span><br />
            <span>Initial</span><br />
            <span>Initial</span><br />
            <span>Initial</span><br />
            <span>Initial</span><br />
        </div>
    </div>
</body>
</html>

July 14, 2016 at 9:54 am Dynamically resize height as content changes #85749

Hristo

Participant

Hello SKIDD,

You add new content in inner splitter but main splitter stay with some value by default.
I would like to suggest you one work around – set some height of the splitter and for nested2.
And each time when add new item set height for the two splitters together.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.