[CLOSED] LabelAlign in NumberField does not work

Hi,
I can not apply the alignment of the label, I want the label to be placed to the right of the field, see my example.
Thank you

Jimmy

Code:

<%@ Page Language="C#" %> <!DOCTYPE html> <html> <head runat="server"> <title>NumberField - Ext.NET Examples</title> <link href="/resources/css/examples.css" rel="stylesheet" /> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>NumberField</h1> <ext:Panel ID="Panel1" runat="server" Title="Simple Form" Width="250" Frame="true" Layout="Form" BodyPadding="5"> <Items> <ext:NumberField ID="NumberField1" runat="server" FieldLabel="Age" LabelAlign="Right" /> </Items> </ext:Panel> </form> </body> </html>

Hello, Jimmy!

I am afraid you may have slightly mistaken the semantic of the LabelAlign setting.

Setting it as Left means the label will be positioned to the left of the field and left-aligned.

Setting it as Right means the labels will still be positioned to the left of the field but now right-aligned.

The setting is documented under Ext.form.field.Number.labelAlign and I believe it supports what I pointed above.
This becomes clear if you expand your test case to this:

Code:

<%@ Page Language="C#" %> <!DOCTYPE html> <html> <head runat="server"> <title>NumberField - Ext.NET Examples</title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <h1>NumberField</h1> <ext:Panel ID="Panel1" runat="server" Title="Simple Form" Width="350" Frame="true" Layout="Form" BodyPadding="5"> <Items> <ext:NumberField ID="NumberField1" runat="server" FieldLabel="Age0" LabelAlign="Right" /> <ext:NumberField ID="NumberField2" runat="server" FieldLabel="Age1" LabelAlign="Left" /> <ext:NumberField ID="NumberField3" runat="server" FieldLabel="Age_Long_Long" /> </Items> </ext:Panel> </form> </body> </html>

To aggravate a little the story here, you are using the Form layout. It is very strict as to the configuration of the fields, so much that it will force the fields to ignore if you set LabelAlign="Top". In fact, if you change any field above to use this label alignment, you'll only see it follow when you change the layout of the surrounding panel to, say VBox.

Yet, there's no actual alignment setting in spite of being placed to the right of the form field. This would naturally happen (to all fields) when you set the whole Ext.NET language setting to RTL (right-to-left writing, as it is used for some languages). But I doubt that would be the case for you. You can set the individual component's RTL setting to true, but you would then get the whole component reversed, with its trigger to the left and the number to the right, as opposite to its usual self. It also prepends the colon to the label instead of appending it.

I believe in your case what you could best do would just add an <ext:Label ... Text="Age" />. You'd have to drop the Form layout nevertheless, as it is not flexible enough to allow you to do this no matter what.

The first thing I think you could do is use the VBoxLayout in the surrounding panel, and then surround each "row" (containing a number field + label) with an <ext:Container /> using the HBoxLayout setting, like this:

Code:

<ext:Container runat="server" Layout="HBoxLayout"> <Items> <ext:NumberField ID="NumberField1" runat="server" /> <ext:Label runat="server" Text="AgeLbl" /> </Items> </ext:Container>

There will be the need for extra styling though, as the "label" would now likely not to be aligned horizontally with the field, so a little padding-top, or tuning of HBoxLayoutConfig (like using 'stretch' in vertical alignment).

I hope this clarifies the issue and helps you find a solution that would best fit your use case!

Hi Fabricio,
I thought it worked like checkboxes, anyway I have used the container with HBoxLayout.
Thank you

Jimmy

Hello again, Jimmy!

Glad it helped and hope it clarified the concept for you. Thanks for the feedback!