Align GXT form:FieldLabel with its gwt:Label widget

Question

GXT 3.x only.

Let us say I wish to create a gxt field-pair of the layout

label: value

For example,

Name: Carthyguessue

Where "Carthyguessue" is a constant field not updateable by user, which I effect with using a gwt:Label.

Hence the ui template:

<form:FieldLabel ui:field="nameLabel" text="Name" labelWordWrap="false">
  <form:widget>
     <g:Label ui:field="nameValue" />
  </form:widget>
</form:FieldLabel>

However, as everyone having done this realises that there would be a deficit of ~3px between the vertical offsets of nameLabel and nameValue.

One suggested approach was to hijack the gwt-Label css to define the offset. However, what if I cannot do that because CSS is totally done by another dept.

Hence, I found this to work.

<form:FieldLabel text="Name" labelWordWrap="false">
  <form:widget>
    <container:VerticalLayoutContainer>
      <g:Label height="3px"/>
      <g:Label ui:field="nameValue" />
    </container:VerticalLayoutContainer>
  </form:widget>
</form:FieldLabel>

My question:

What problems/issues would I face with this approach? (which I have yet to be aware of).
Is there a better non-css solution?
Ok, less importantly, why gxt folks wouldn't provide a matching Label widget (Without annoying boundaries simulated by disabled greyed-out text field), in that we still have to use gwt:Label for this purpose?

Mayank Pandya Mayank Pandya · Accepted Answer · 2013-05-13T11:02:06

1) better way is to create custom CSS class and asign a name to <g:Label ui:field="nameValue" /> so in future it will easy to change.

2) No there is no other good solution. because it is a CSS issue so you have to solve it via CSS. You should create your own widget for this.

Label widget in GWT simply renders as a DIV not as a HTML's label element causing it to be displayed with block layout.

Align GXT form:FieldLabel with its gwt:Label widget

1 Answers