jQWidgets Forums

jQuery UI Widgets › Forums › Getting Started › Splitter Problem

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  Aemal 11 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Splitter Problem Posts
  • September 23, 2013 at 6:54 am Splitter Problem #29349

    Aemal
    Participant

    I want to have a layout design for my application (a full row for header, a full row for footer, a left panel for tree view and a center view for loading the contents in tabs).

    I need to have something like this: Click

    The header and footer should not have the collapse button. I made something like this in other framework and is really working fine.

    I have made something in jqWidgets, but can’t get it working as my desire, you need to collapse and expand the header once to get the display of bottom panel and as well I couldn’t fix the size of the header, footer and left panel to stick to a fixed size.
    Following is my code:

     

     

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>Nested Splitters with jqxTabs. The sample demonstrates how to
    add the jqxTabs widget inside a Split Panel</title>
    <link rel=”stylesheet” href=”<?php echo base_url(); ?>assets/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/scripts/gettheme.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript” src=”<?php echo base_url(); ?>assets/jqwidgets/jqxexpander.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#mainSplitter’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’, splitBarSize: 5, resizable: true, panels: [{ size: ’50px’ }, { size: ‘90%’ }] });
    $(‘#bottomSplitter’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’, panels: [{ size: ‘90%’  }, { size: ’50px’, collapsible: false  }] });
    $(‘#centerSplitter’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘vertical’, panels: [{ size: ‘50%’, collapsible: false }, { size: ‘50%’ }] });
    //$(‘#centerTop’).jqxSplitter({ height: ‘100%’, width: ‘100%’, orientation: ‘horizontal’, panels: [{ size: ‘50%’, collapsible: true }, { size: ‘50%’ }] });
    });
    </script>
    <style type=”text/css”>
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id=”mainSplitter”>
    <div>
    Top
    </div>
    <div>
    <div id=”bottomSplitter”>
    <div>
    <div id=”centerSplitter”>
    <div>Left</div>
    <div>Center</div>
    </div>
    </div>
    <div>
    Footer
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

     

    September 23, 2013 at 7:15 am Splitter Problem #29356

    Peter Stoev
    Keymaster

    Hi Aemal,

    Please, look at: http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    September 23, 2013 at 9:34 am Splitter Problem #29362

    Aemal
    Participant

    Dear Peter,

    Thanks a heap for your quick reply.
    The code mentioned in the post isn’t compatible with Fire Fox but with Google Chrome it shows fine.

    Thanks,

    September 23, 2013 at 9:38 am Splitter Problem #29364

    Peter Stoev
    Keymaster

    Hi Aemal,

    For FF, add -moz-box-sizing

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    September 23, 2013 at 10:22 am Splitter Problem #29368

    Aemal
    Participant

    Thanks Peter for superb support!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.