jQuery UI Widgets Forums Layouts Docking 3 windows docking with different window size

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

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

  • Marina
    Participant

    Hi,
    I’m trying to achieve layout where I will have one window on top that will have 100%, and two windows under this main window 50% each and user should be able to swap them and then, whatever window on top will become 100% and two on bottom 50% each in width. I can’t figure out how to set this deal still.

    <div id="docking">
    
                <div id="panel1">
                    <div id="window1"  >
    
                        <div>Header 1</div>
    
                        <div style="overflow: hidden;">Content 1</div>
    
                    </div>
                </div>
                <div id="panel2">
                    <div id="window2" >
    
                        <div>Header 2</div>
    
                        <div style="overflow: hidden;">Content 2</div>
    
                    </div>
    
                     <div id="window3" >
    
                        <div>Header 3</div>
    
                        <div style="overflow: hidden;">Content 3</div>
    
                    </div>
                </div>
    
        </div>

    and setting in JS

     $("#docking").jqxDocking({
                 width: 900,
                 orientation: 'vertical',
                    theme: 'classic', 
                    floatingWindowOpacity: 0.4 ,
                    mode: 'docked' ,
                    windowsMode: {
                     'window1': 'docked',
                     'window2': 'docked',
                     'window3': 'docked'
                 }
             
             });

    ivailo
    Participant

    Hi Marina,

    Unfortunately, this layout cannot be achieved.

    Best Regards,
    Ivailo Ivanov

    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.