PDA

View Full Version : [CLOSED] VBoxLayout Align Center



bayoglu
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?

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>

Baidaly
May 28, 2013, 10:50 PM
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>

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

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

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