jQuery UI Widgets Forums Layouts Layout and Docking Layout how to split page into two parts with one fixed width and another rest width

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

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

  • wureka
    Participant

    Hi,
    I want to split my page into two vertical panels.
    The left panel has a fixed width 240px, and the right panel will use the rest width of page, so that when I change my browser to wider, and the right panel could also meet to the browse’s right edge. Below is my code:

    CSS:

    
    html, body
    {
    height: 100%;
    width: 100%;
    }
    

    javascript

    
     var layout = [{
                        type:'layoutGroup',
                        orientation:'horizontal',
                        width:'100%',
                        height:'100%',
                        alignment: 'left',
                        items:[{
                                type:'tabbedGroup',
                                width:'240px',
                                height:'100%',
                                allowClose:false,
                                items: [
                                    {
                                        type:'layoutPanel',
                                        title:'TEST LEFT',
                                        contentContainer:'leftPanel'
                                    }
                                ]
                        },{
                            type:'tabbedGroup',
                            height:'100%',
                            allowClose:false,
                            items: [{
                                type:'layoutPanel',
                                title:'TEST RIGHT',
                                contentContainer:'rightPanel'
                            }
                                    ]
                        }]
                }];
                $('#globalContainer').jqxLayout({ width: '100%', height: '100%', layout: layout })
    

    HTML code is:

    <div id="globalContainer">
            <div data-container="leftPanel"></div>
            <div data-container="rightPanel" style="overflow: hidden;"></div>
        </div>
    

    But the result is, the right panel is wrapped to below the left panel, which is not what I want.

    How to solve it ?
    Many thanks

    • This topic was modified 4 years, 8 months ago by  wureka.

    Dimitar
    Participant

    Hi wureka,

    Unfortunately, this kind of layout is not supported by the jqxLayout widget. Widths and heights have to either be in pixels or percentages, but not a combination of both. There is not an ‘auto’ setting, either.

    This can be achieved with jqxSplitter, though. E.g.: https://www.jseditor.io/?key=jqxsplitter-panel-with-dynamic-size.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.