web applications - A full page layout with resizable panes using jQuery UI

Question

I'm trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows:

The panes should be resizable through dragging the pane edges with the mouse (see arrows in image above).

The individual panes have should have vertical scrollbars in case of overflowing content, that is, no global browser window scrollbar.

Using jQuery and jQuery UI Resizable, I've created this (partly working) JSFiddle.

HTML:

<div class="header">
  Fixed header    
</div>
<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

CSS:

html, body {
    height: 100%;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner {
    display: table;
    width: 100%;
    height: 100%;
}
.pane {
    display: table-cell;
}
.left.pane {
   background-color: olivedrab; 
}
.center.pane {
    background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
    display: table-row;  
}
.center.pane .inner .top {
    background-color: lightcoral;   
}
.center.pane .inner .bottom {   
    background-color: orange;
    height: 100%;
    width: 100%;
}
.right.pane {
    background-color: #999;
}

JavaScript:

$(function () {
    $(".left.pane").resizable({
        handles: "e, w"
    });
    $(".right.pane").resizable({
        handles: "e, w"
    });
    $(".center.pane .inner .bottom").resizable({
        handles: "n, s"
    });
});

It has several issues, including:

• When resizing Left, Right is also resized (which it shouldn't)
• When resizing Left towards full width, Center content is hidden under Right
• When resizing Right the wrapper (Fuchsia-colored) is partly visible
• Center bottom is resized through the top of the Center top, not through it's own top

I'm aware of the jQuery Layout plugin, but as far as I can see, it doesn't offer quite the layout I'm after. Also, I want to keep it as simple as possible.

Furthermore, I have tried Methvins splitter plugin, but couldn't get it to work.

My question:

Any suggestions for how to create a layout as in the image from jQuery UI Resizable and what I have in the JSFiddle?

Answer 1

There are more appropriate plugins, based on jQuery to obtain what you want.

OPTION 1:

I personally used in a my project UI Layout.

It is an almost old project (6 years ago), but in mid-2014 its development is re-started, even if there are no more information after september 2014.

Actually, last stable version is 1.4.3, released in sept '14. New website is:

• https://github.com/allpro/layout/

---

OPTION 2:

If you need a more complete solution, you could think about jEasy UI, that is a complete framework that

[...] helps you build your web pages easily

It is a sort of replacement of jQuery UI, with some similar widgets (dialogs, accordions, ...) and something exclusive, like Layout module, already linked in my answer.

---

OPTION 3: Analogue solution to the previous one, is Zino UI, another complete UI framework that has a specific component dedicated to "Split Layout"

---

OPTION 4: jQWidgets is another library, with similar purposes of previous ones, and specifically could be interesting jqxSplitter module.

---

Related alternative (similar):

There is also another alternative, that allows to slice panels in the browser windows but in addition allows to drag&drop single panels creating different tabs, and side-by-side sub-windows.

This is called Golden Layout. It's different from previous ones, for many reasons also more powerful but surely at the moment it has not Touch support...