Child of FieldSet has height that extends the contents of Field Set (clips correctly)

**nbuesing** · 4 Dec 2012 7:12 AM

GXT 3.0.3-SNAPSHOT (11/27) and 3.0.2
GWT 2.4
Internet Explorer 8
Chrome 25
Windows 7 - 64 Bit

--

I create a FieldSet with a child of VerticalLayoutContainer. When using browser's tools to highlight the DIV within the field set, the height extends beyond the border of the fieldset. Contents do not get displayed (so cropping is working), but when it comes to use of margins, height calculations, etc., it is causing issues.

I have provided screenshots of DIV highlighed as shown in IE8 and Chrome.

Internet Explorer 8
VerticalLayoutDataWithinFieldSetExtendsPastFieldSet.jpg
Chrome 25
VerticalLayoutDataWithinFieldSetExtendsPastFieldSet_Chrome.jpg

In VLC add ContentPanel with Margins of 5, no margin shows up at bottom. Because of this cropping issue, having to play around with margins to get things to appear as you expect. Also, you will see that under Chrome there is a bottom margin, but it isn't the same as the top margin. So not only are margins between top and bottom different, but the appearances between browsers is now different.

Code:

        ContentPanel p = new ContentPanel();
        p.setHeadingText("panel");
        container.add(p, new VerticalLayoutData(1, 1, new Margins(5)));

Internet Explorer 8
VerticalLayoutDataWithinFieldSetExtendsPastFieldSetContentPanel.png
Chrome
VerticalLayoutDataWithinFieldSetExtendsPastFieldSetContentPanel_Chrome.png

Test Code

FieldSetAndVerticalLayoutContainer.zip

**nbuesing** · 4 Dec 2012 11:58 AM

Based on other useful information Colin has provided on another topic, did changes to my .html and .gwt.xml file, and neither fixed this issue.

removed unnecessary code from the Examples.html file and made sure it had a link to the reset.css style sheet.

Code:

<!doctype html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="examples/reset.css" />
    <script type="text/javascript" language="javascript" src="examples/examples.nocache.js"></script>
  </head>
  <body>
  </body>
</html>

remove inherits to some GWT code in the *.gwt.xml file; it use to have

<inherits name='com.google.gwt.user.User' />
<inherits name='com.google.gwt.user.theme.clean.Clean' />

Code:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='examples'>

    <inherits name="com.sencha.gxt.ui.GXT" />
    <set-property name="user.agent" value="ie8,gecko1_8,safari" />
    <set-property name="gxt.user.agent" value="ie8,gecko1_9,chrome" />

    <source path='client' />
    <entry-point class='com.buesing.gwt.client.FieldSetAndVerticalLayoutContainer' /> 
</module>

**Colin Alworth** · 4 Dec 2012 12:13 PM

Thanks, I've confirmed this issue, though am not yet certain of the cause or a workaround. It seems to behave properly in FF17, but incorrectly in both IE8 and Chrome 23. There are slight differences between how it is broken in Chrome 23 and IE8 though.

We'll update this thread when we've come to any conclusion on the bug, or if a workaround becomes available.

**Colin Alworth** · 4 Dec 2012 12:24 PM

And by the way, there is no problem with having an inherits statement for the User module - but it isn't required either. GXT depends on and inherits User, so it will implicitly be added automatically.

**Colin Alworth** · 4 Dec 2012 1:17 PM

Simplest test case I can produce, broken in Chrome 23 (just barely too tall), in IE8 (slightly too tall). It appears that GXT is measuring the element that it should be, but that these browser report sizes that do not make sense when asked for how much space is available inside the fieldset's body (they either include too much top or bottom padding/margin that is owned by the parent), while FF17 reports the correct values.

Code:

public class Test implements EntryPoint {

  private FieldSet fieldSet = new FieldSet();
  private VerticalLayoutContainer container = new VerticalLayoutContainer();


  public Test() {
    ContentPanel p = new ContentPanel();
    p.setHeadingText("panel");
    container.add(p, new VerticalLayoutData(1, 1));
    
    fieldSet.setHeadingText("field set");
    fieldSet.add(container);
  }


  public void onModuleLoad() {
    Viewport viewport = new Viewport();
    viewport.add(fieldSet, new MarginData(20));//margins help to show overlap in firebug/inspector
    RootPanel.get().add(viewport);
  }
}

Child of FieldSet has height that extends the contents of Field Set (clips correctly)

Thread Tools

Search Thread

Display

Child of FieldSet has height that extends the contents of Field Set (clips correctly)

Child of FieldSet has height that extends the contents of Field Set (clips correctly)