how to split page into two parts with one fixed width and another rest width

[wurekaParticipant]

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

[DimitarParticipant]

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/

[Author]

Posts