Announcement

**Isomorphic** · 12 Nov 2013, 15:09

In our tests we're not seeing a difference between behavior on IE and Moz / Chrome.
However, perhaps more importantly, it sounds like your expectation isn't matching what we'd consider correct behavior.

In this example, you're setting the autoHeight flag on both the layout and the DynamicForm.

This means the form is sizing vertically to fit its content, and the Layout is sizing vertically to fit the form. As such there is no space above or below the form, so you would expect to see no red above or below the form.

This is indeed what we see in all browsers - the green form extends all the way to the edge of the layout and no red is visible.
(If you specify an explicit, larger height for the layout, or you specify an explicit membersMargin, you would expect to see red around the member form, but this will not be the case in the code you showed us here).

It is possible that the difference you are seeing is perhaps due to an unsupported doctype setting on your app? Can you verify whether you have the HTML5 doctype enabled?

Other than that - from your description it sounds like you're trying to make the form exactly fit the item's height, perhaps? In this case, you could use setCellPadding(0); to get rid of the default cellPadding around the item.

Regards
Isomorphic Software

Join Date: Jun 2025 · 12 Nov 2013, 15:40

OK, I'll try again with more details...

Here is a full app that shows the issues:

Code:

public class Issues implements EntryPoint {
  public void onModuleLoad() {
    SelectItem item = new SelectItem("name", "title");
    item.setTitleAlign(Alignment.RIGHT);
    item.setWidth("100%");

    DynamicForm form = new DynamicForm();
    form.setWidth100();
    form.setAutoHeight();
    form.setBackgroundColor("green");
    form.setItems(item);
		
    Layout layout = new Layout();
    layout.setWidth100();
    layout.setAutoHeight();
    layout.setBackgroundColor("red");
    layout.addMember(form);

    layout.draw();
  }
}

Here's my html file:

Code:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="gwt:property" content="locale=en_US"/>
   
     <title>Isomorphic Issue Repro</title>

    <script>
      isomorphicDir = "issues/sc/";
    </script>
    <script type="text/javascript" language="javascript" src="issues/issues.nocache.js"></script>
  </head>

  <body class="body" style="border:0">
  </body>
</html>

I've attached screen shots of running this code in IE vs Chrome. The images are blow up to make the issue more visible.

I am not trying to make the form the same height as the item. In fact, I do not mind the padding at all. I am trying to make the layout around the form the same height as the form it contains (or if not the same height at least get the form to vertically center within the layout that contains it - this becomes a non-issue if they are the same height).

Notice that the area around the control in Chrome has more space below the item than above it. This is because in Chrome the layout containing the form is 3px taller than the form. The form is 27px and the layout around it is 30px. Why is the layout taller than it's content?

Again, I am surprised that given these sizes that the green background on the form covers all 30px when the form object in the DOM with the green background is only 27px. Why is the background extending outside the bounds of the item it is the background color for?

Assuming that the "form" in the DOM actually extends to the layers surrounding the <form> tag, then possibly that explains why the green is 30px tall, but then the question becomes why is the form becoming 3px taller and chrome and thus causing the item inside the form to not be vertically centered.

I've trimmed this down to a pretty short example. There is something else going on if you cannot reproduce what I am seeing with this code.

Attached Files

**Isomorphic** · 13 Nov 2013, 11:51

Ok - we've made a change which we believe will address this issue. Please try the next nightly build (Nov 14 or above).

Regards
Isomorphic Software

Announcement

Autosize height calculation of Layout containing form incorrect in Chrome/Firefox

Comment

Comment

Comment