Problem with height of widget inside layout

[piotr286]

Hi,

I wrote the following code:

public void onModuleLoad() {
    	TextItem textItem = new TextItem();
    	DynamicForm form = new DynamicForm();
    	form.setItems(textItem,textItem,textItem,textItem,textItem,
textItem,textItem,textItem,textItem,textItem,textItem,textItem);
    	
    	VLayout controls = new VLayout();
    	controls.setWidth(400);
    	controls.setHeight100();
    	controls.setMembers(form);
    	
    	RichTextEditor richTextEditor = new RichTextEditor();
    	richTextEditor.setHeight100();
    	richTextEditor.setShowEdges(true);
    	
    	HLayout hLayout = new HLayout();
    	hLayout.setHeight(300);
    	hLayout.setPadding(10);
    	hLayout.setShowEdges(true);
    	hLayout.setMembers(controls, richTextEditor);
    	
    	VLayout task = new VLayout();
    	task.setWidth100();
		task.addMember(hLayout);
		
		task.draw();
    }

The problem concerns the height of richTextEditor which is set to 100%. However, if I have many items in controls object, then the height of richTextEditor is still 100% but in reference to this line: hLayout.setHeight(300); In fact, the height of hLayout is higher than 300 because of many controls in controls object. This is what I get:



Is there any way to force richTextEditor to have the same height as controls object?

Thanks in advance

[houman001]

It looks like the size of both components (righ and left) are calculated first, then if the component on left exceeded the allocated space the container is resized BUT this change is not reflected properly on the contained component on right.
That's why your pages looks fine if you either resize the browser window (make it bigger) or reduce the number of input components on left.

The attached screenshot is produced by the following code. I didn't manage to embed the image in my post (tell me how if you know).

		VLayout mainLayout = new VLayout();
		mainLayout.setBackgroundColor("lightblue");
		mainLayout.setWidth100();
		mainLayout.setHeight100();
		mainLayout.setPadding(10);
		RootPanel.get().add(mainLayout);

		HLayout header = new HLayout();
		header.setWidth100();
		header.setHeight100();
		header.setPadding(10);
		header.setMembersMargin(10);
		header.setBackgroundColor("lightgreen");
		mainLayout.addMember(header);
		
		HLayout footer = new HLayout();
		footer.setWidth100();
		footer.setHeight(600);
		footer.setMembersMargin(10);
		footer.setBackgroundColor("yellow");
		mainLayout.addMember(footer);
		
		VLayout left = new VLayout();
		left.setWidth("95%");
		left.setBackgroundColor("orange");
		left.setPadding(10);
		header.addMember(left);
		left.addMember(new Label("TEST LABEL"));
		left.addMember(new Label("TEST LABEL"));
		left.addMember(new Label("TEST LABEL"));
		left.addMember(new Label("TEST LABEL"));
		
		VLayout right = new VLayout();
		right.setWidth("5%");
		right.setHeight100();
		right.setBackgroundColor("brown");
		right.setPadding(10);
		header.addMember(right);

In this example the brown box on top-right is supposed to be 100% height of the given space (green placeholder).

I am using SmartGWT 2.2 and Firefox 3.5.10

[houman001]

It looks like a serious layout issue.
Does anyone have any idea/solution/workaround?
Expanding based on the size of content is not something you can avoid using.

[Abd4llA]

Ok, I've almost the same problem, the following code produces the behaviour

	public void onModuleLoad() {
		
//
		HLayout main = new HLayout();
		HLayout fixedHeightStack = new HLayout();
		fixedHeightStack.setShowEdges(true);
		fixedHeightStack.setHeight("100");
		main.setHeight100();
		main.setWidth100();
		main.setShowEdges(true);
		final VLayout leftStack = new VLayout();
		leftStack.setShowEdges(true);
		leftStack.setHeight100();
		final VLayout rightStack = new VLayout();
		rightStack.setShowEdges(true);
		rightStack.setHeight100();
		
		fixedHeightStack.addMember(leftStack);
		fixedHeightStack.addMember(rightStack);
		Button but = new Button("add");
		but.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent event) {
				rightStack.addMember(new Button("Button"));
				leftStack.resizeTo(rightStack.getWidth(), rightStack.getHeight());
			}
		});
		rightStack.addMember(but);
		main.addMember(fixedHeightStack);
		main.draw();
    }

At the beginning it's normal as follows


Then after adding more buttons to the right stack, it expands, and the outer one does as well, however, the left stack doesn't expand accordingly, and this is not normal...if however the buttons were add "before" the whole outer layout is drawn, it'll show up correctly, so once it's "drawn" it doesn't work as expected anymore, or I just dunno how to.



What I expect, is that when the outer stack expands, all inner ones expands as well since I'm setting height100.

Here's the console log:

http://pastebin.com/5we12Gge

I'm using smartgwt-2.2 with firefox 3.6.12

[Isomorphic]

When you set 100% size on a Canvas, you are telling it to expand to it's parent's *specified* size. If the parent has overflow:"visible" and expands beyond it's specified size to accommodate some other children, the child with 100% size will not resize to this new, expanded size. Doing so as a general behavior would create lots of non-deterministic layout cases.

If you need behavior like this, identify the child that may cause the parent to expand and use the Resized event on that child to have other children match it's size.

Note, don't take the approach of having the child match the parent's size when it expands. If you do that, the parent will never shrink.