View Full Version : [CLOSED] VBoxLayout Align Center

May 28, 2013, 6:21 PM
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?


<ext:Panel runat="server" ID="MyPanel" Layout="VBoxLayout">
<ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
<ext:Chart runat="server" StyleSpec="background:#fff;" InsetPadding="25" Flex="1" MarginSpec="0 20 0 0" >
<ext:Label runat="server" Text="Chart1"></ext:Label>
<ext:Chart runat="server" Animate="true" Shadow="true" InsetPadding="60" Theme="Base:gradients" Flex="1">
<ext:Label runat="server" Text="Chart2"></ext:Label>

May 28, 2013, 10:50 PM

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>

.ux-label-center-aligned span {
text-align: center;
display: block;

May 29, 2013, 6:50 AM
Perfect. Thank you @Daulet, please mark as closed.

Feb 05, 2016, 4:15 PM
Try this one

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