Databases
StackOverflow2013
Postsdbo
POweb page responsive resizable grid design with 3 resizable areas
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POweb page responsive resizable grid design with 3 resizable areas
    text
    copied!<p>I hope this is the right place to ask this,<br> I want to make a web page with 3 div inside a container<br> in a way that the left and right div are resizable<br> while the center div gets resized accordingly to the left and right div,<br> something like the coding areas in plunker or jsfiddle,<br> the 3 areas must stay horizontal no jumping to the next line.<br> This problem has been bugging me for almost a week now any help or pointer to the right direction is appreciated.</p> <p><strong>Note:</strong> I'm using AngularJs for this project an answer with Angulary approach is favorable but other approach are acceptable.</p> <h2>Update:</h2> <p>I wasn't clear about the resizable part, I meant resizable by the user not just resizable when the browser gets resized, meaning if you look at my <a href="http://embed.plnkr.co/ocuGOs4uYvXjMFY3WEii/preview" rel="nofollow">example</a> you'll see that when you click on the border the associated area slide out and the center area gets resized to the right size now my problem with what i have is that's not responsive and it's buggy, when the both left and right area are hidden, clicking to reopen the right area will show a bug in the behavior of the center area when it's getting resized, just like in jsfiddel when you resize the javascript area the css and result areas gets resized.<br> Better example MS PowerPoint when you resize the left and right panel the center gets accordingly resized.</p> <p>Here's my <a href="http://embed.plnkr.co/ocuGOs4uYvXjMFY3WEii/preview" rel="nofollow">plnkr</a>, I hope this's clear enough.<br> <strong>Thanks in advance.</strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload