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?
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...
There were a few small problems that caused the behaviour that you don't like.
These were fixed in this Fiddle
The problems were:
When resizing Left, Right is also resized (which it shouldn't)
Fixed by setting a initial width (in percent)
When resizing Left towards full width, Center content is hidden under Right
Couldn't reproduce
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
Fixed by setting left to 0 during resize.
$(".right.pane").resizable({
handles: "e, w",
resize: function(event, ui) {
ui.position.left = 0;
}
});
Center bottom is resized through the top of the Center top, not through it's own top
This is due to that JQuery UI Resizable uses relative positioning which do not work in table cells. Fixed by adding a content div that handles the resize.
<div class="top pane">
<div class="top-content">Center top</div>
</div>
I found one which seems acceptable for this requirement, if you looking for something more minimalistic compared to jEasy UI. : )
http://w2ui.com/web/demo/layout
Also it's no dead project; Seems still active on github https://github.com/vitmalina/w2ui/, which is nice.
I'll give it a try. Just wanted to share this, to save others search time, hopefully.
i'm usign this plugin
with jquery
http://www.bramstein.com/projects/jlayout/jquery-plugin.html
I came up with the answer to this myself, although in the end it took me over a year of development! The result is a modern, responsive panel layout widget built using jQuery and jQuery UI widget factory.
http://www.silvercore.co.uk/widgets/propanellayout/
The best solution at the time the question was asked was undoubtedly jQuery UI.Layout, but over time that project has stagnated and the plugin does not work with jQuery 2. Despite the code being released on GitHub its fate is unknown, which makes using it as the foundation of a long term project questionable.
A few of the other links posted here are dead now and if you don't want or need a full application framework your choices are limited.
OK, hopefully my last edit. Went through a bunch of these, and ended up with jQuery UI layout.
Goldenlayout is nice, but you have to actually add the html in each pane through javascript. If you've got all your stuff in react components I guess this might be fine, but not for my use case.
jQuery UI layout seems to be pretty robust and was just updated in 2014.
You can use Gridstack
It's easy to use and powerful.
I am using jQuery mobile. In my web page, I have created a div with data-role as header. Inside this, there is an image.
Now, I have created another div with data-role popup. When the page loads, the div with role popup is hidden as expected.
When the user clicks on the image, the popup is expected to be displayed.
It does. Problem is that it displays in a manner that overlaps with the header and immediately below the image which triggered the popup.
I am calling the popup method on the image selector by passing it the following options
$("#navBar").popup("open", {
x: 0,
y: 50,
transition: "reverse slide"
});
This does not do the trick. Instead, the popup is displayed immediately below the image which triggered it. If X and Y options are removed, then the popup is displayed in the center of the window.
Some more information -
Here is the code that jquery mobile has prepared:
<div class="ui-popup-container reverse slide in ui-popup-active" id="navBar-popup" style="max-width: 1271px; top: 30px; left: 15px;" tabindex="0">
Here it can be seen that jQuery Mobile has added the styling top=30px and left=15px.
To fulfill my needs, I want that top=40px and left=0px. I want to do this without overriding the base CSS. I was hoping that the X and Y options passed to the popup() method would do the trick but they are not working!
An Image of the issue to help in understanding.
popup by default tries to position directly on top of the element that opened it, in case you do it using API and specify x and y, it will try to center popup at given coordinates. But to avoid popup showing off screen jquery mobile also enforces a padding between popup dialog and the edge of the screen, and by default those padding margins are 30 vertical and 15 horizontal. So the reason your pup is positioned as it is is due to those tolerances.
To position popup to exact x and y you want, you will need to add half of popup's width to the desired x, and half of popup's height to desired y.
Im using horizontal radio buttons in jQuery mobile:
http://jquerymobile.com/test/docs/forms/radiobuttons/
When you make the fieldset horizontal the style changes and the round 'selected' bit goes away. Can this behavioral be disabled so it users the normal jQuery mobile styling?
Yes, but not in a easy way. This much I can remember. I don't have an example with myself, also don't want to rewrite it again.
First, what you need is a firebug plugin (or something similar) for Firefox or Chrome.
I. Horizontal radiobuttons have a disabled span used for round selection img. Enable it by giving it a display: block-inline (in that case give other div the same property, this will allow them to be in line, in other case they will overlap) or give both of them display: block; a float them to the left (don forget position: relative) .
I am talking about this:
<span class="ui-btn-text">List</span>
<span class="ui-icon ui-icon-radio-off ui-icon-shadow"> </span>
Top one is a text span and bottom one is an icon holder. Bottom one is disabled (display: none;) in case of horizontal group.
II. Second thing, on click/select prevent background color change. This will leave you with horizontal version of vertical radiobutton control group.
Hope this helps.
In an application I'm developing, I pop up Help in a modal jQueryUI dialog. For the most part, it works beautifully. There is one problem: if you try to use the arrow on the lower right of the dialog to scroll the help text, you can't, because it is in the same place as the mouse-drag resize for the dialog.
I realize this would not happen if I used the jQueryUI dialog "button" option to add a "Close" button at the bottom of the dialog, but that would be inconsistent with our style elsewhere in the application.
Anyone know a reasonable way around this? Ideally, I'd like something that would give me a small non-scrolled div at the bottom of this dialog, without affecting other dialogs, so that the mouse-drag resize would fall lower on the screen than the down-arrow.
Adding a bottom padding to the ui-dialog class in your jquery-ui.xxxx.css should result in the behavior you want:
.ui-dialog {
... Existing CSS...
padding-bottom: 15px !important;
}
I am trying to put auto height and width to modal dialog box (provided by jQuery UI). But some how the position of my dialog is getting disturbed. It is not coming in center. Every time I click on the link to open the dialog box, the dialog opens at different position. Could anybody please suggest how to resolve this issue...
u can main
div
{
margin:0 auto;
}
or
{
margin:auto auto;
}
==========
Othervise u can set a left and top javascript dailog box position set...
thanks
suresh