[CLOSED] Center align panel in container

  1. #1

    [CLOSED] Center align panel in container

    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"));
                                }));
    Last edited by Daniil; May 08, 2012 at 11:34 AM. Reason: [CLOSED]
  2. #2
    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.
    Geoffrey McGill
    Founder

Similar Threads

  1. how to align the Icon in GridCommand to center
    By harshad.jadhav in forum 1.x Help
    Replies: 0
    Last Post: Dec 30, 2010, 10:24 AM
  2. Replies: 3
    Last Post: Dec 09, 2010, 5:40 AM
  3. [CLOSED] Align Center in Panel
    By macap in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 30, 2009, 9:52 AM
  4. [CLOSED] Hi how to align the label text to center?
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 13, 2009, 11:03 AM
  5. Align GridPanel Center. [BUG]
    By hugo.carvalho in forum 1.x Help
    Replies: 2
    Last Post: Aug 11, 2009, 10:26 AM

Posting Permissions