Another form column width mystery

[mathias]

OK, i tried another layout form setup that looks strange to me.

See this screenshot of a form with some items with various col/rowspans:

It's pretty straightforward i suppose? All items are aligned fine, but as you can see, the textareas do not expand. We discussed this in another thread, so i tried to do as was suggested - i called setWidth("*") on both the textareas. I did not get the desired result as you can see in image #2 below:


The first textarea expands all the way, but the textitems below are strangely aligned and do not take up their entire cells. Also, the last textarea does not at all take up its cell.

What am i missing here? I would have expected this to look as the first image, but with textareas going all the way. Code below, pointers as always appreciated.

@Override
public void onModuleLoad() {

HLayout hLayout = new HLayout();
hLayout.setWidth(600);
hLayout.setHeight100();
hLayout.setBorder("1px solid red");

DynamicForm form = new DynamicForm();
form.setTitleOrientation(TitleOrientation.TOP);
form.setWidth("100%");
form.setCellBorder(1);
form.setTitleSuffix(null);
form.setBorder("1px solid green");
form.setCanEdit(false);
form.setCellPadding(10);
form.setNumCols(3);

TextItem royBatty = new TextItem();
TextItem deckard = new TextItem();

TextItem pris = new TextItem();
TextItem sebastian = new TextItem();
TextItem tyrell = new TextItem();

TextAreaItem dude = new TextAreaItem();
dude.setColSpan(2);
dude.setRowSpan(2);

TextAreaItem dude2 = new TextAreaItem();
dude2.setColSpan(3);

//dude.setWidth("*");//UNCOMMENTING THESE causes image 2 rather than image 1 above
//dude2.setWidth("*");

form.setItems(royBatty, dude, deckard, pris, sebastian, tyrell, dude2);

hLayout.addMember(form);
hLayout.draw();
}

[mathias]

Hi there!

I would love if you would find time to look at this at some point. I made an even more simplified test case that i'll explain with screenshots and code.

I'd argue that the test is pretty basic. A hlayout width 800, with a form of colspan(3).
First a textarea with colspan 3, then on the following row a textfield followed by another textarea with colspan 2.

Expectation: that the right end of the two text areas to align, but alas they do not.

1. the first textarea has the width as if the layout was indeed 800 as i have specified.
2. However, the form expands beyond the 800 pixels because of the second row and the layout (and form) becomes 910 pixels instead.

like this:


OK, so i set the overflow on the layout to AUTO (see code).

Now the layout stays at 800, however the form overflows, and i get a horizontal scrollbar in the layout instead.

like this:


Finally, i tried setting the form width to "*". This causes everything to be very narrow:



What are we missing here? Why cannot the textareas align? Why does not the form stay within the 800 pixels when we 1. set the form width to 100% and 2. set the textarea widths to "*"?

public void onModuleLoad() {

VLayout hLayout = new VLayout();
hLayout.setWidth(800);
hLayout.setHeight(800);
hLayout.setBorder("3px solid red");
hLayout.setOverflow(Overflow.AUTO);//this causes widh to expand outside 800 pixels, or the layout to become as width as form (910 rather than 800)

DynamicForm form = new DynamicForm();
form.setTitleOrientation(TitleOrientation.TOP);
form.setWidth100();//setting to "*" causes the form to fit inside the layout, but the textareas become very narrow!
//form.setWidth("*");//seems to behave same as setAutoWidth()
form.setBorder("1px solid green");
form.setNumCols(3);

TextAreaItem deckard = new TextAreaItem();
deckard.setTitle("Deckard");
deckard.setColSpan(3);
deckard.setWidth("*");

TextItem pris = new TextItem();
pris.setTitle("Pris");

TextAreaItem roybatty = new TextAreaItem();
roybatty.setTitle("RoyBatty");
roybatty.setColSpan(2);
roybatty.setRowSpan(2);
roybatty.setWidth("*");

form.setItems(deckard, pris, roybatty);

hLayout.addMember(form);
hLayout.draw();
}