[CLOSED] VBoxLayout Align Center

  1. #1

    [CLOSED] VBoxLayout Align Center

    Hello I have a layout structure as below. I want to center align charts and labels below them. With Align="Stretch", charts show regularly but labels are left aligned as expected. When I set Align="Center", labels are horizontally aligned but charts are not visible. In fact they are visible if I manually set width for chart. What is the correct layout structure to horizontally center align labels and charts; and set %100 width for charts?

    Thanks.

                                                <ext:Panel runat="server" ID="MyPanel" Layout="VBoxLayout">
                                                    <LayoutConfig>
                                                        <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                                                    </LayoutConfig>
                                                    <Items>
                                                        <ext:Chart runat="server" StyleSpec="background:#fff;" InsetPadding="25" Flex="1" MarginSpec="0 20 0 0" >
                                                              ...
                                                        </ext:Chart>   
                                                        <ext:Label runat="server" Text="Chart1"></ext:Label>
                                                        <ext:Chart runat="server" Animate="true" Shadow="true" InsetPadding="60" Theme="Base:gradients" Flex="1">
                                                              ...
                                                        </ext:Chart>          
                                                        <ext:Label runat="server" Text="Chart2"></ext:Label>                                                
                                                    </Items>
                                                </ext:Panel>
    Last edited by Daniil; May 29, 2013 at 8:38 AM. Reason: [CLOSED]
  2. #2
    Hello!

    In this case label is stretched but inline elements (span) inside the labels are not center aligned. You should add the following class to labels and CSS:

    <ext:Label runat="server" Text="Chart1" Cls="ux-label-center-aligned"></ext:Label>
    <style>
           .ux-label-center-aligned span {
    		text-align: center;
    		display: block;
    	}
    </style>
  3. #3
    Perfect. Thank you @Daulet, please mark as closed.
  4. #4

    Hello

    Try this one

    <ext:TextField ID="txtUsername" IsRemoteValidation="true" FieldStyle="text-transform:uppercase;" InvalidCls="custom-err" InputType="Text" ..... />

Similar Threads

  1. [CLOSED] how to set tabpanel align center in the screen
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 06, 2013, 11:22 AM
  2. Replies: 1
    Last Post: Apr 03, 2013, 6:44 AM
  3. [CLOSED] How to center align the buttons
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 21, 2013, 8:31 PM
  4. [CLOSED] Align Center in Panel
    By macap in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 30, 2009, 9:52 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