PDA

View Full Version : How to remove the margin-bottom of the FormLayout



jennygandra
5 Jan 2010, 4:09 AM
Hi All,

I am using a LayoutConatiner with FormLayout. The FormLayout applies 4px bottom margin for each item. How can I remove this 4px margin.

Thanks in advance.

Arno.Nyhm
5 Jan 2010, 11:02 AM
this can be done by css:

add this style in an additional gxt-patch.css file and load it after the gxt css file:

.my-small-style-name .x-form-item {
margin-bottom:0px !important;
}and then add this style name (without the dot) to your form:


myForm.addStyleName("my-small-style-name");

jennygandra
6 Jan 2010, 4:13 AM
Hi

Below is the code snippet,

FormLayout fl = new FormLayout();
fl.setLabelWidth(100);
fl.setLabelAlign(LabelAlign.RIGHT);

//fl.setExtraStyle("my-small-style-name");
final LayoutContainer layoutContainer = new LayoutContainer(fl);
layoutContainer.setBorders(true);

layoutContainer.setStyleName("my-small-style-name");
addStyleName("my-small-style-name");

MultiField<Field<?>> customMultiField = new MultiField<Field<?>>();
customMultiField.setSpacing(20);
customMultiField.setFieldLabel("Questions");
customMultiField.setStyleName("my-small-style-name");

ListView<ModelData> list1 = new ListView<ModelData>();
list1.setDisplayProperty("name");
ListStore<Stock> store = new ListStore<Stock>();
store.add(TestData.getStocks());
list1.setStore(store);
customMultiField.add(new AdapterField(list1));

MultiField<Field<?>> customMultiField2 = new MultiField<Field<?>>();
customMultiField2.setSpacing(15);
customMultiField2.setFieldLabel("Comments");
ListView<ModelData> list2 = new ListView<ModelData>();
list2.setDisplayProperty("name");
ListStore<Stock> store2 = new ListStore<Stock>();
store2.add(TestData.getStocks());
list2.setStore(store);
customMultiField2.add(new AdapterField(list2));

CustomMultiField<Field<?>> customMultiField3 = new CustomMultiField<Field<?>>();
customMultiField3.setSpacing(20);
customMultiField3.setFieldLabel("Services");
ListView<ModelData> list3 = new ListView<ModelData>();
list3.setDisplayProperty("name");
ListStore<Stock> store3 = new ListStore<Stock>();
store3.add(TestData.getStocks());
list3.setStore(store);
list3.setTemplate(getTemplate());
customMultiField3.add(new AdapterField(list3));

layoutContainer.add(customMultiField);
layoutContainer.add(customMultiField2);
layoutContainer.add(customMultiField3);

I have added the style that you have mentioned, but still I am getting 4px margin bottom between the 3 multifields.

Thanks in advance.

Arno.Nyhm
7 Jan 2010, 5:05 AM
look with firebug inside the code whats your custom multifield have a css class name and if the margin comes from this css - then add a patch for this to your custom css.