PDA

View Full Version : [OPEN] Beta 4: form fields have different heights



gishmo
4 Mar 2012, 4:43 AM
In a complex form with more than one column, it is hard to layout this forms, when using CheckBox, Textfields, RadioButtons and Combos, because all of them have different line heights.

This makes complex forms really ugly.

32368

32369

32370

The code to create the last image:



package de.gishmo.inputfieldsheight.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.Style.Side;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.TabItemConfig;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData;
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.CheckBox;
import com.sencha.gxt.widget.core.client.form.FieldLabel;
import com.sencha.gxt.widget.core.client.form.FieldSet;
import com.sencha.gxt.widget.core.client.form.FormPanel;
import com.sencha.gxt.widget.core.client.form.TextField;


/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class InputFieldsHeight implements EntryPoint {




/**
* This is the entry point method.
*/
public void onModuleLoad() {
BorderLayoutContainer rootPanel = new BorderLayoutContainer();
rootPanel.setBorders(true);
rootPanel.setSize("100%", "100%");


ContentPanel cpNorth = new ContentPanel();
cpNorth.setHeadingText("Header");
cpNorth.add(new Label("Test Fieldset Resize"));
BorderLayoutData dataNorth = new BorderLayoutData(64);
dataNorth.setMargins(new Margins(2, 2, 2, 2));
rootPanel.setNorthWidget(cpNorth, dataNorth);


ContentPanel cpWest = new ContentPanel();
cpWest.setHeadingText("Navigation");
cpWest.add(new Label("West"));
BorderLayoutData dataWest = new BorderLayoutData(128);
dataWest.setMargins(new Margins(2, 2, 2, 2));
rootPanel.setWestWidget(cpWest, dataWest);

BorderLayoutData dataCenter = new BorderLayoutData();
dataCenter.setMargins(new Margins(2, 2, 2, 2));
rootPanel.setCenterWidget(this.asWidget(), dataCenter);


Viewport viewport = new Viewport();
viewport.add(rootPanel);

RootLayoutPanel.get().add(viewport);
}

private Widget asWidget() {
// Center-Panel
ContentPanel contentPanel = new ContentPanel();
contentPanel.setHeadingText("Center");
contentPanel.setBorders(false);
contentPanel.setBodyBorder(false);


// Tab-Panel
TabPanel tabPanel = new TabPanel();
tabPanel.setBorders(false);
tabPanel.setBodyBorder(true);
tabPanel.setTabScroll(true);
// Portal-Tab (immer vorhanden)
TabItemConfig tab01 = new TabItemConfig("Tab 01");
tab01.setClosable(false);
tab01.setEnabled(true);
tabPanel.add(this.buildForms(), tab01);


contentPanel.add(tabPanel);


return contentPanel;
}


private FormPanel buildForms() {
HorizontalLayoutContainer fieldContainer = new HorizontalLayoutContainer();



VerticalLayoutContainer fieldContainerLeft = new VerticalLayoutContainer();
fieldContainerLeft.setBorders(false);


FieldSet fsAnschrift = new FieldSet(){
@Override
protected void onResize(int width, int height) {
super.onResize(width, height);
this.getContainerTarget().setWidth(width-this.getElement().getFrameWidth(Side.LEFT, Side.RIGHT), true);
}
};
fsAnschrift.setCollapsible(false);
fsAnschrift.setHeadingText("Anschrift");
fieldContainerLeft.add(fsAnschrift, new VerticalLayoutData(1, -1));
// VerticalPanel fuer die Fields im Fieldset
VerticalLayoutContainer fcAnschrift = new VerticalLayoutContainer();
fcAnschrift.setBorders(false);
// Felder
fcAnschrift.add(new FieldLabel(new TextField(), "Name"), new VerticalLayoutData(1, -1));
fcAnschrift.add(new FieldLabel(new TextField(), "Plz"), new VerticalLayoutData(1, -1));
fcAnschrift.add(new FieldLabel(new TextField(), "Ort"), new VerticalLayoutData(1, -1));
// FieldSet fuellen ...
fsAnschrift.add(fcAnschrift);




VerticalLayoutContainer fieldContainerRight = new VerticalLayoutContainer();
fieldContainerRight.setBorders(false);

FieldSet fsKategorie = new FieldSet(){
@Override
protected void onResize(int width, int height) {
super.onResize(width, height);
this.getContainerTarget().setWidth(width-this.getElement().getFrameWidth(Side.LEFT, Side.RIGHT), true);
}
};
fsKategorie.setCollapsible(false);
fsKategorie.setHeadingText("Kategorie");
fieldContainerRight.add(fsKategorie, new VerticalLayoutData(1, -1));
// VerticalPanel fuer die Fields im Fieldset
VerticalLayoutContainer fcKategorie = new VerticalLayoutContainer();
fcKategorie.setBorders(false);
// Felder
fcKategorie.add(new FieldLabel(new CheckBox(), "Art"), new VerticalLayoutData(1, -1));
fcKategorie.add(new FieldLabel(new CheckBox(), "Status"), new VerticalLayoutData(1, -1));
fcKategorie.add(new FieldLabel(new TextField(), "Referenz"), new VerticalLayoutData(1, -1));
// FieldSet fuellen ...
fsKategorie.add(fcKategorie);


fieldContainer.add(fieldContainerLeft, new HorizontalLayoutData(.5d, -1, new Margins(4, 4, 4, 4)));
fieldContainer.add(fieldContainerRight, new HorizontalLayoutData(.5d, -1, new Margins(4, 8, 0, 4)));



// Fuer die Farbe
BorderLayoutContainer bc = new BorderLayoutContainer();
bc.setSize("100%", "100%");
BorderLayoutData bcCenter = new BorderLayoutData();
bcCenter.setMargins(new Margins(0));
bc.setCenterWidget(fieldContainer, bcCenter);



FormPanel formPanel = new FormPanel();
formPanel.add(bc);

return formPanel;
}
}


Please give all form fields (except TextArea) the same line heights!

WesleyMoy
29 Mar 2012, 3:37 PM
Thanks for the suggestion. I've filed a ticket against them team to have them take a look. While that's queued, consider looking into the Appearances for those form widgets to see if you can tweak the CSS yourself. That might make for a usable workaround for you for now, and this will likely be similar to how we will be making the changes in the library to fix this.