View Full Version : [FIXED] FieldLabel - LabelAlign can not be changed from TOP to any other

21 Dec 2011, 2:11 AM

One can change FieldLabel align from LEFT to TOP, but not from TOP to any other. Also setting label align to RIGHT does not work.

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.container.Viewport;
import com.sencha.gxt.widget.core.client.form.FieldLabel;
import com.sencha.gxt.widget.core.client.form.TextField;
import com.sencha.gxt.widget.core.client.form.FormPanel.LabelAlign;

public class GxtModule implements EntryPoint {

private boolean labelOnTop;

public void onModuleLoad() {
final Viewport view = new Viewport();
final VerticalLayoutContainer vlc = new VerticalLayoutContainer();

final TextField field = new TextField();
final FieldLabel label = new FieldLabel(field, "Label");

final TextButton b = new TextButton("Swap label");

b.addDomHandler(new ClickHandler() {
public void onClick(ClickEvent p_event) {
labelOnTop = !labelOnTop;
label.setLabelAlign(labelOnTop ? LabelAlign.TOP : LabelAlign.LEFT);
}, ClickEvent.getType());

vlc.add(label, new VerticalLayoutData(1, -1));
vlc.add(b, new VerticalLayoutData(1, -1));

Try to click swap button. It will change label position from LEFT to TOP. If you click it again, it should change it back but it does not. Forcing layout and resizing browser does not help either.

23 Feb 2012, 12:43 AM
I have to agree with raivis that this can be annoying. The code (revision 2195) that sets the alignment does call the onUpdateOptions method in FieldLabel:

public void setLabelAlign(LabelAlign labelAlign) {
appearance.onUpdateOptions(getElement(), options);

But alas, it doesn't do very much with it in the FieldLabelAppearance implementation... If you look in the code of FieldLabelDefaultAppearance you see that only TOP is considered:

public void onUpdateOptions(XElement parent, FieldLabelOptions options) {
LabelAlign labelAlign = options.getLabelAlign();
XElement fieldElement = getChildElementWrapper(parent);
XElement labelElement = getLabelElement(parent);

// Adjust for label content, label separator
if (options.isHtmlContent()) {
labelElement.setInnerHTML(options.getContent() + options.getLabelSeparator());
} else {
labelElement.setInnerText(options.getContent() + options.getLabelSeparator());

// Adjust for label alignment
if (labelAlign == LabelAlign.TOP) {
} else {

// Adjust for label width
if (labelAlign == LabelAlign.TOP) {
labelElement.getStyle().setProperty("width", "auto");
fieldElement.getStyle().setPaddingLeft(0, Unit.PX);
} else {
int pad = options.getLabelPad();
if (pad == 0) pad = 5;
labelElement.getStyle().setWidth(options.getLabelWidth(), Unit.PX);
fieldElement.getStyle().setPaddingLeft(options.getLabelWidth() + pad, Unit.PX);

// Adjust for label padding
int fieldElementPadding = labelAlign == LabelAlign.TOP ? 0 : (options.getLabelWidth() + options.getLabelPad());
fieldElement.getStyle().setPaddingLeft(fieldElementPadding, Unit.PX);
A workaround would be creating your own FieldLabelAppearance I suppose.
But I was wondering if we could get an update on this issue? Possibly if it would be included in the next beta or not? It would be great if this was fixed on GXT's end, thanks in advance!

Colin Alworth
23 Feb 2012, 6:29 AM
Yep, makes sense - a bug has been filed with the team, and we'll make sure to update this thread when a fix is prepared.

18 Mar 2012, 5:52 PM
This should be fixed in beta 4.

lefke123 or raivis can you validate? I tested your code and it works as expected.

26 Mar 2012, 1:59 AM
Yep, it works as expected now, thanks.