PDA

View Full Version : [CLOSED] Center align panel in container



machinableed
May 04, 2012, 2:22 AM
This a probably a stupid question but anyway...

I have a tab panel that contains 3 panels each of which has a MaxWidth set - this is working fine and as expected. Now I want to make sure that the panels are horizontally centered within the containing tab panel in cases where the width of the tab panel is much greater than the max width of the child panels (obviously the default is for them to be left aligned). how can I achieve this?



items.Add(Html.X().TabPanel()
.ID("pnlServiceDetailsContainer")
.AnchorHorizontal("100%")
.Items(cnt =>
{
cnt.Add(Html.X().Panel()
.Title("Basic Service Details")
.Items(sub =>
{
sub.Add(Html.X().Container()
.ItemsFromPage(this, "/Views/Shared/_BasicServiceDetailsPanel.cshtml"));

//sub.Add(Html.X().Container()
// .ItemsFromPage(this, "/Views/Shared/_PlaceDetailsPanel.cshtml"));
}));

cnt.Add(Html.X().Panel()
.Title("Contract Details")
.ItemsFromPage(this, "/Views/Shared/_ContractDetailsPanel.cshtml"));

cnt.Add(Html.X().Panel()
.Title("Pricing Details")
.ItemsFromPage(this, "/Views/Shared/_RecurringChargesPanel.cshtml"));
}));

geoffrey.mcgill
May 04, 2012, 6:55 AM
Hi,

A good way of centering a Panel is by setting the HBoxLayout on the Parent Container, the adding a Container to each side of the center Panel. Set .Flex="1" on each of the lef/right Containers, and set a .Width on the center Panel.

Something like the following:

Example


<ext:Panel Layout="hbox">
<Items>
<ext:Panel Flex="1" />
<ext:Panel Width="500" />
<ext:Panel Flex="1" />
</Items>
</ext:Panel>

Hope this helps.