I try to create a border layout with only header/center/footer. I made following changes to your sample border-layout-markup.html:
so far so good. The layout is as expected.
But as soon as I remove all inner html from center div, the center div shrinks to a small area.
Why the center div does not fill 100% width in this case? I attached my modified html file for your review.
Thanks.
Hi there,
Change your markup to the following:
<div id="layout" style="width:100%; height: 300px; display:block;"> <div class="header">HEADER - some text here</div> <div class="footer">FOOTER - some text here </div> <div class="left"></div> <div class="center"> <h3>CENTER AREA</h3> </div> <div class="right"></div></div>
Also include in the configuration:
leftWidth: "0%", rightWidth: "0%"
Then the layout should work as you expect it.
Thanks for the reply. your suggestion works.
A few observations:
1. these options do not seem to work: showLeft, showRight, showHeader, showFooter.
2. in order to hide header or footer, simply remove the div.
3. in order to hide left or right, set the leftWidth and rightWidth to either 0%, or 0. the div does not need to exist.
(1) if set to 0%, center fills 100% width, which is the original scenario I was trying to achieve.
(2) if set to 0, center is sized to accommodate its content.
case 3 seems to indicate that, setting both left/right to percentage activates a "percentage mode", to enable the center area to fill the rest of the width regardless of its content.
so another issue is, if I set leftWidth and rightWidth to 100, the center area collapses to accommodate its content. how do I set left and right to a fixed width (as opposed to percentage), while still have center area fill the rest?
Hi Steven,
There are multiple scenarios that are not very well supported in the CTP version of the control. We're currently working on the RTM version and all of the points that you're bringing up are being taken into consideration.
Thank you for the input!