Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Resizable Panels?

Tags:

jquery

css

I need to build a page that looks like Mac Mail or an Outlook Inbox. where the one page has a top panel and a bottom panel, and there is a divider in between that you can use to re-size, to either make a panel higher or shorter.

What's the standard jQuery/CSS technique for accomplishing this? I've never done this before so I am interested in your suggestions or any surprises that you might have encountered before.

like image 977
TheExit Avatar asked Nov 10 '10 21:11

TheExit


People also ask

How do I resize a form in HTML?

If you want to resize your form, open the Form Editor and select the Design icon. Afterward, from the Form section, you can change the Form width. By default, the form's width is 650 pixels. The form's height depends on the number of form fields displayed on your form.


2 Answers

There are a few jQuery plugins that can do something like this. I think this jQuery Splitter plugin is what you are looking for though.

like image 82
Brandon Avatar answered Sep 17 '22 14:09

Brandon


jQuery UI offers this as a plugin. Very simple and it really works well. I always use it. Here is the link with instructions:

http://docs.jquery.com/UI/Resizable

like image 30
tucaz Avatar answered Sep 18 '22 14:09

tucaz