jQuery UI Widgets Forums Layouts Splitter 3×2 Splitter All-way Resizing

This topic contains 5 replies, has 2 voices, and was last updated by  nkuznetsov 4 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • 3×2 Splitter All-way Resizing #74324

    nkuznetsov
    Participant

    Hi,

    I need some advice on my 3×2 splitter. Here is my current layout:

    http://postimg.org/image/rco9xg3cz/

    I need it resizeable all-way. Currently all 3 of my horizontal splitters are present and work well. I’m having trouble with the 2 vertical splitters. I’ve implemented the one that divides top and middle section but not sure how to do that for the middle and bottom section. Here is my splitter code:

    HTML (window numbering goes from left to right, top to bottom):

    
    <div id="splitterHorizontalTop">
    		<div>
    			<div id="splitterTop">
    				<div id="window0"></div>
    				<div id="window1"></div>
    			</div>
    		</div>
    		<div>
    			<div id="splitterCenter">
    				<div id="window2"></div>
    				<div id="window3"></div>
    			</div>
    		</div>
    	</div>
    	<div id="splitterBottom">
    		<div id="window4"></div>
    		<div id="window5"></div>
    	</div>
    </div>
    

    I basically wrapped top and middle section in a vertical splitter.

    Here is my js (typescript):

    // Horizontal splitter for the 2 top sections
            $('#splitterHorizontalTop').jqxSplitter(
                {
                    width: '100%',
                    height: some height,
                    orientation: 'horizontal',
                    panels: [{ size: some size }, { size: some size }]
                });
    
            // Top section
            $('#splitterTop').jqxSplitter(
                {
                    width: '100%',
                    height: '100%',
                    panels: [{ size: some size }, { size: some size }]
                });
    
            // Middle section
            $('#splitterCenter').jqxSplitter(
                {
                    width: '100%',
                    height: '100%',
                    panels: [{ size: some size }, { size: some size }]
                });
    
            // Bottom section
            $('#splitterBottom').jqxSplitter(
                {
                    width: '100%',
                    height: some height,
                    panels: [{ size: some size }, { size: some size }]
                });

    Thanks!

    • This topic was modified 4 years, 6 months ago by  nkuznetsov.
    3×2 Splitter All-way Resizing #74326

    nkuznetsov
    Participant

    Nevermind. I figured I can simply wrap the top+middle sections and bottom section in a vertical splitter in similar fashion as I am wrapping top and middle. Was wondering if there’s cleaner way of doing that though.

    3×2 Splitter All-way Resizing #74327

    nkuznetsov
    Participant

    Actually, I tried that approach, and it doesn’t work very well when using horizontal splitters. Still looking for something cleaner.

    3×2 Splitter All-way Resizing #74352

    Dimitar
    Participant

    Hi nkuznetsov,

    There are several possible approaches, but I think you may find this one useful:

    <!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.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#mainSplitter").jqxSplitter({ width: 1000, height: 600, panels: [{ size: '200px' }, { size: '400px'}], orientation: 'horizontal' });
                $("#upperSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '500px' }, { size: '500px'}], orientation: 'vertical' });
                $("#lowerSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '200px' }, { size: '200px'}], orientation: 'horizontal' });
                $("#middleSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '500px' }, { size: '500px'}], orientation: 'vertical' });
                $("#bottomSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '500px' }, { size: '500px'}], orientation: 'vertical' });
            });
        </script>
    </head>
    <body>
        <div id='mainSplitter'>
            <div>
                <div id="upperSplitter">
                    <div>
                        <span>Panel 1</span></div>
                    <div>
                        <span>Panel 2</span></div>
                </div>
            </div>
            <div>
                <div id="lowerSplitter">
                    <div>
                        <div id="middleSplitter">
                            <div>
                                <span>Panel 3</span></div>
                            <div>
                                <span>Panel 4</span></div>
                        </div>
                    </div>
                    <div>
                        <div id="bottomSplitter">
                            <div>
                                <span>Panel 5</span></div>
                            <div>
                                <span>Panel 6</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    3×2 Splitter All-way Resizing #74379

    nkuznetsov
    Participant

    Thanks, will try this out and let know how it went.

    3×2 Splitter All-way Resizing #74588

    nkuznetsov
    Participant

    This approach works, thank you.

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

You must be logged in to reply to this topic.