Hybrid View

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-2800 in 3.1.1.
  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    12
    Vote Rating
    0
    deepfriedbrain is on a distinguished road

      0  

    Default TextButton inside a ContentPanel has unwanted top margin in IE

    TextButton inside a ContentPanel has unwanted top margin in IE


    I noticed that in IE 8, when I place a TextButton inside a Content Panel, it has unwanted top margin. It works fine in Chrome and FF though. I'm posted a standalone test case and screenshot below. I'm using GXT v3.0.1.

    Code:
    package com.hello.gxt.client; 
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.IsWidget;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;
    import com.sencha.gxt.widget.core.client.ContentPanel;
    import com.sencha.gxt.widget.core.client.button.TextButton;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
     
    public class HelloGXT implements IsWidget, EntryPoint {
     
      private ContentPanel root;
     
      @Override
      public Widget asWidget() {
        if (root == null) {
     
          root = new ContentPanel();
          root.setHeaderVisible(false);
          root.setPixelSize(200, 100);
           
          TextButton btn = new TextButton("Test Button");
          
          VerticalLayoutContainer con = new VerticalLayoutContainer();     
          con.add(btn, new VerticalLayoutData(-1, -1));
          root.setWidget(con);
        }
     
        return root;
      }
     
      @Override
      public void onModuleLoad() {
        RootPanel.get().add(asWidget());
      }
    }
    Sencha_GXT_TextButton_ContentPanel.jpg

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    16
    Vote Rating
    0
    flyingbo is on a distinguished road

      0  

    Default Top margin in IE

    Top margin in IE


    We have the same problem in IE 8. IE 9 works.

    Used versions 3.0.3 and 3.0.4-Nightly-Build

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Thanks for the report - I can reproduce this in IE8, and have filed it internally.

    deepfriedbrain, from the extra padding around the ContentPanel, it appears you have either not added the reset.css to your html page (as described in setup.txt), or you have the GWT Clean theme added in your module file. The Clean theme adds padding in several areas where GXT expects there to be none, and can prevent certain things like the Viewport from behaving correctly. This does not effect the bug - it happens with or without it. That said, it makes this simplified bug harder to notice correctly.

    Here's a simplified test that clearly shows that the TextButton is at fault, and that the ContentPanel (and VLC) is just a red herring:
    Code:
    public class Test implements EntryPoint {
      @Override
      public void onModuleLoad() {
        RootPanel.get().add(new TextButton("test"));
      }
    }
    screenshot18.png

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    16
    Vote Rating
    0
    flyingbo is on a distinguished road

      0  

    Default


    I use ToggleButton. Don´t know if it is important for your fix.

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    It probably won't make any difference - ToggleButton appears to only add different behavior to TextButton, not new rendering - but any additional context/details are always nice to have.

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    16
    Vote Rating
    0
    flyingbo is on a distinguished road

      0  

    Default


    Hello,

    maybe it helps:

    btn.getElement().getStyle().setDisplay(Display.BLOCK); is my workaround...

    A button receives the display:inline-block css-property but i could not find this property in ButtonCell.css to overwrite it.

Thread Participants: 2

Tags for this Thread