Again: Border Layout with 2 Fluid Panels
51 views
Skip to first unread message
Peter Valdemar Mørch
May 3, 2010, 2:29:34 PM5/3/10
to jLayout
I think I'm trying to achieve something similar to the guy in the
"Border Layout with 2 Fluid Panels" thread
http://groups.google.com/group/jlayout/browse_thread/thread/6d5860c65f44c894:
Using terminology from the Border Layout, I want "north", "west",
"center" and "south" divs.
"north" and "south" are to be static, but "west" and "center" are
dynamic and either can be one-liners or very long. I want "west" to
have a fixed width (e.g. 200px) but have "center" take up all
remaining height and width ( 100% - 200px ) - also across window
resizes.
When I started with a border layout I discovered, that if center is
longer/heigher than the page, I couldn't get it to work; center
"overflowed under south". I want scrollbars on the entire page, not on
the center div.
Bram Stein wrote:
> To answer your question: yes, but not with a border layout. The border
> layout is designed to have the center component take up the remaining
> space, with the side components having priority. You can however
> achieve the desired result with a flexGrid layout where you set the
> center and east component to 50% in CSS and the min-width and max-
> width of the west component to some fixed value.
So then I tried that: http://www.morch.com/download/noindex/jQuery/flexGridQuestions2.html
. But then the total width of <body> becomes 100% + 200px resulting in
horizontal scrollbars.
About _height_ of the container, I also noted, that the container's
height depends on the first div. If the first div happens to be less
high than the rest, I get this weirdness:
http://www.morch.com/download/noindex/jQuery/flexGridQuestions.html .
Am I doing something wrong here? Is this on purpose?
Is there any way I can use jLayout out-of-the-box to achieve my goal
above? I'm hoping I missed something trivial.
I'm thinking that e.g. both iGoole, gmail and many other web
applications have this sort of layout and I don't understand why it
apparently is so complicated to do... Can anyone think of some other
way to achieve this?
> If that doesn't solve your problem it should also be fairly
> straightforward to implement a layout manager of your own. The jQuery
> jLayout plugin takes care of most of the (harder) things related to
> margins, paddings, etc. so the layout manager only concerns itself
> with the actual layout.
I haven't done it yet, of course, but if I'm going to have to write
code anyway, is it really that tricky to do with vanilla jQuery
without jLayout since for my case it doesn't have to be generic?
Peter
--
You received this message because you are subscribed to the Google Groups "jLayout" group.
To post to this group, send email to jla...@googlegroups.com.
To unsubscribe from this group, send email to jlayout+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jlayout?hl=en.
"Border Layout with 2 Fluid Panels" thread
http://groups.google.com/group/jlayout/browse_thread/thread/6d5860c65f44c894:
Using terminology from the Border Layout, I want "north", "west",
"center" and "south" divs.
"north" and "south" are to be static, but "west" and "center" are
dynamic and either can be one-liners or very long. I want "west" to
have a fixed width (e.g. 200px) but have "center" take up all
remaining height and width ( 100% - 200px ) - also across window
resizes.
When I started with a border layout I discovered, that if center is
longer/heigher than the page, I couldn't get it to work; center
"overflowed under south". I want scrollbars on the entire page, not on
the center div.
Bram Stein wrote:
> To answer your question: yes, but not with a border layout. The border
> layout is designed to have the center component take up the remaining
> space, with the side components having priority. You can however
> achieve the desired result with a flexGrid layout where you set the
> center and east component to 50% in CSS and the min-width and max-
> width of the west component to some fixed value.
So then I tried that: http://www.morch.com/download/noindex/jQuery/flexGridQuestions2.html
. But then the total width of <body> becomes 100% + 200px resulting in
horizontal scrollbars.
About _height_ of the container, I also noted, that the container's
height depends on the first div. If the first div happens to be less
high than the rest, I get this weirdness:
http://www.morch.com/download/noindex/jQuery/flexGridQuestions.html .
Am I doing something wrong here? Is this on purpose?
Is there any way I can use jLayout out-of-the-box to achieve my goal
above? I'm hoping I missed something trivial.
I'm thinking that e.g. both iGoole, gmail and many other web
applications have this sort of layout and I don't understand why it
apparently is so complicated to do... Can anyone think of some other
way to achieve this?
> If that doesn't solve your problem it should also be fairly
> straightforward to implement a layout manager of your own. The jQuery
> jLayout plugin takes care of most of the (harder) things related to
> margins, paddings, etc. so the layout manager only concerns itself
> with the actual layout.
I haven't done it yet, of course, but if I'm going to have to write
code anyway, is it really that tricky to do with vanilla jQuery
without jLayout since for my case it doesn't have to be generic?
Peter
--
You received this message because you are subscribed to the Google Groups "jLayout" group.
To post to this group, send email to jla...@googlegroups.com.
To unsubscribe from this group, send email to jlayout+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jlayout?hl=en.
Bram Stein
May 3, 2010, 4:00:22 PM5/3/10
to jLayout
If I understand you correctly, you want a fixed header and footer,
with scrollable content. This content should then have two columns,
one with fixed width and the other taking up all available space.
Could you have a look at the following example and see if it meets
your requirements?
http://github.com/bramstein/javascript/blob/master/src/jlayout/borderlayout-resize-fixed-and-fluid.html
Perhaps I misunderstood your requirements, but that seems to me like
it is the GMail and iGoogle layout.
Bram
On May 3, 8:29 pm, Peter Valdemar Mørch <li...@morch.com> wrote:
> I think I'm trying to achieve something similar to the guy in the
> "Border Layout with 2 Fluid Panels" threadhttp://groups.google.com/group/jlayout/browse_thread/thread/6d5860c65...
with scrollable content. This content should then have two columns,
one with fixed width and the other taking up all available space.
Could you have a look at the following example and see if it meets
your requirements?
http://github.com/bramstein/javascript/blob/master/src/jlayout/borderlayout-resize-fixed-and-fluid.html
Perhaps I misunderstood your requirements, but that seems to me like
it is the GMail and iGoogle layout.
Bram
On May 3, 8:29 pm, Peter Valdemar Mørch <li...@morch.com> wrote:
> I think I'm trying to achieve something similar to the guy in the
Peter Valdemar Mørch
May 3, 2010, 4:35:54 PM5/3/10
to jLayout
On May 3, 10:00 pm, Bram Stein <b.l.st...@gmail.com> wrote:
> Could you have a look at the following example and see if it meets
> your requirements?
>
That's exactly it. I'll give it a more thorough spin tomorrow, but it
looks like it is right on the money.
Thanks! ( Tak! - now that you're in Denmark... :-) )
Reply all
Reply to author
Forward
0 new messages