FormItem Vertical Alignment

[jvincent]

I cannot vertically align to the top a SelectItem next to a TextAreaItem within a DynamicForm. The only option appears to be middle align. How can I do this?

[jmichelgarcia]

I think I experienced the same issue, can you post a screenshot and minimal code ?

[vinuriyer]

hi ,

do u mean a dynamic form containing first a textarea item and then a selectitem..
i dont found any pblms ..check out the sample below and the expectedoutput.jpg

VLayout layout = new VLayout(10);

         final DynamicForm form = new DynamicForm();

         TextItem textItem = new TextItem();
         textItem.setTitle("Text");
         textItem.setHint("<nobr>A plain text field</nobr>");

         TextAreaItem textAreaItem = new TextAreaItem();
         textAreaItem.setTitle("TextArea");


         ComboBoxItem cbItem = new ComboBoxItem();
         cbItem.setTitle("Select");
         cbItem.setHint("<nobr>A simple combobox</nobr>");
         cbItem.setType("comboBox");
         cbItem.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");

         LinkedHashMap<String, String> valueMap = new LinkedHashMap<String, String>();
         valueMap.put("US", "<b>United States</b>");
         valueMap.put("CH", "China");
         valueMap.put("JA", "<b>Japan</b>");
         valueMap.put("IN", "India");
         valueMap.put("GM", "Germany");
         valueMap.put("FR", "France");
         valueMap.put("IT", "Italy");
         valueMap.put("RS", "Russia");
         valueMap.put("BR", "<b>Brazil</b>");
         valueMap.put("CA", "Canada");
         valueMap.put("MX", "Mexico");
         valueMap.put("SP", "Spain");

         final SelectItem selectItem = new SelectItem();
         selectItem.setTitle("Select");
         selectItem.setHint("<nobr>A combobox with icons</nobr>");
         selectItem.setValueMap(valueMap);
         selectItem.setImageURLPrefix("flags/16/");
         selectItem.setImageURLSuffix(".png");

         LinkedHashMap<String, String> valueIcons = new LinkedHashMap<String, String>();
         valueIcons.put("US", "US");
         valueIcons.put("CH", "CH");
         valueIcons.put("JA", "JA");
         valueIcons.put("IN", "IN");
         valueIcons.put("GM", "GM");
         valueIcons.put("FR", "FR");
         valueIcons.put("IT", "IT");
         valueIcons.put("RS", "RS");
         valueIcons.put("BR", "BR");
         valueIcons.put("CA", "CA");
         valueIcons.put("MX", "MX");
         valueIcons.put("SP", "SP");
         selectItem.setValueIcons(valueIcons);

         SelectItem selectItem2 = new SelectItem();
         selectItem2.setTitle("Select");
         selectItem2.setHint("<nobr>A combobox with styled entries</nobr>");
         selectItem2.setValueMap("<span style='color:FF0000;'>Red</span>",
                 "<span style='color:00FF00;'>Green</span>",
                 "<span style='color:0000FF;'>Blue</span>");


         final SelectItem selectItemMultipleGrid = new SelectItem();
         selectItemMultipleGrid.setTitle("Select Multiple (Grid)");
         selectItemMultipleGrid.setMultiple(true);
         selectItemMultipleGrid.setMultipleAppearance(MultipleAppearance.GRID);
         selectItemMultipleGrid.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");

         final SelectItem selectItemMultiplePickList = new SelectItem();
         selectItemMultiplePickList.setTitle("Select Multiple (PickList)");
         selectItemMultiplePickList.setMultiple(true);
         selectItemMultiplePickList.setMultipleAppearance(MultipleAppearance.PICKLIST);
         selectItemMultiplePickList.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");

        [b] form.setItems(textItem, textAreaItem, cbItem, selectItem, selectItem2, selectItemMultipleGrid, selectItemMultiplePickList);[/b]
         layout.addMember(form);


         layout.draw();

I also tried with

 form.setItems(textItem, [b] cbItem, selectItem,textAreaItem, selectItem2,[/b] selectItemMultipleGrid, selectItemMultiplePickList);

no problems found !!!

kindly add ur test code which is not working !! or else go thru this sample and make necessary changes....

Hop it is helpful!!

[jvincent]

See the bad.png attachment. It shows what we're currently limited to. The good.png attachment shows what we want to do.

[jmichelgarcia]

I can't find such way neither in DynamicForm, neither in SelectItem.

A work around will be to put selectItem and TextAreaItem in differents dynamicForms ? and put both in a HLayout

[jvincent]

Isomorphic, do you have any advice on this?

[Furgas]

I have the same problem.

I've added vertical-align:top to CSS style of: formCell, formCellFocused and formCellDisabled classes. It's global solution and I'm not sure how it will affect other components.

I guess you can also try to create your own CSS style with proper vertical alignment and set it for this cell with FormItem.cellStyle property, although it would be nice to have FormItem.verticalAlign property for this purpose.

[RAS]

Hello All,

I'm using SmartGWT 3.0. Here I can find 2 properties of FormItem:

formItem.setVAlign(VerticalAlignment vAlign)
formItem.setTitleVAlign(VerticalAlignment titleVAlign)

These functionalities serve your purpose but i doubt they're available in older versions of SmartGWT.

[Furgas]

You're right. I'm still using SmartClient 8.1, so I didn't notice that this property was introduced in SmartClient 8.2. Great!

[jvincent]

Isomorphic, can we get a build that fixes this? We are on GWT 2.4 & SmartGwt 2.5.

We also have paid support and our posts are not being replied to. Will you please check on that?

[Isomorphic]

You aren't marked as supported. You may using the wrong account (use whichever one also has your license) or your manager may not have reported you as a developer who should have support.

As far as this particular thread - this is not a fix, it's an enhancement. Upgrade to 3.0 to get it.