Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    60
    Vote Rating
    0
    villemustonen is on a distinguished road

      0  

    Default [CLOSED] ToolBar Icon+Text overlap in Firefox

    [CLOSED] ToolBar Icon+Text overlap in Firefox


    The buttons in a toolbar get rendered incorrectly in FireFox after programmatically collapsing the ContentPanel that contains the ToolBar. The icons and the text overlap. (shown in attachment)


    Description of layout:
    I have a LayoutContainer with BorderLayout. This container has an east ContentPanel. Ithas two children: A FormPanel and a ContentPanel. This ContentPanel has its top component set to a ToolBar , by calling setTopComponent. In this ToolBar there are two buttons with icon styles defined in CSS as follows:
    Code:
    .icon-one {
        background-image: url( './images/icons/resultset_next.png' ) !important;
    }
    .icon-two {
        background-image: url( './images/icons/resultset_last.png' ) !important;
    }
    Before laying out the components, I call collapse on the ContentPanel that contains the ToolBar. This causes the button texts and icons to get rendered incorrectly.

    Sample code:
    Code:
    package test.client;
    
    import com.extjs.gxt.ui.client.Style;
    import com.extjs.gxt.ui.client.util.Margins;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.form.FormPanel;
    import com.extjs.gxt.ui.client.widget.layout.*;
    import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class Test implements EntryPoint {
    
        private Viewport viewport = new Viewport();
    
        public void onModuleLoad() {
    
            // East-panel
            ContentPanel east = new ContentPanel();
            east.setLayout(new AnchorLayout());
            east.setHeading("East");
            BorderLayoutData eastData = new BorderLayoutData(Style.LayoutRegion.EAST, 500);
            eastData.setSplit(true);
            eastData.setMargins(new Margins(2));
    
            // BorderLayout container
            LayoutContainer container = new LayoutContainer();
            container.setLayout(new BorderLayout());
            container.add(east, eastData);
    
            // East-panel first child
            FormPanel formPanel = new FormPanel();
            formPanel.setHeading("FormPanel");
            formPanel.setCollapsible(true);
    
            // East-panel second child
            ContentPanel contentPanel = new ContentPanel();
            contentPanel.setCollapsible(true);
            contentPanel.setTitleCollapse(true);
            contentPanel.setHeading("ContentPanel");
    
            // ToolBar with buttons
            ToolBar toolBar = new ToolBar();
            Button one = new Button("This is Button One");
            one.setIconStyle("icon-info");
            Button two = new Button("This is Button Two");
            two.setIconStyle("icon-logout");
            toolBar.add(one);
            toolBar.add(two);
    
            // Set to contentPanel top component
            contentPanel.setTopComponent(toolBar);
    
            // Without this line, the button renders correctly
            contentPanel.collapse();
    
            east.add(formPanel, new AnchorData("100%"));
            east.add(contentPanel, new AnchorData("100%"));
    
            viewport.setLayout(new FitLayout());
            viewport.add(container);
            RootPanel.get().add(viewport);
    
        }
    }
    Bug info:
    Version: GXT 2.0.1
    Browser: Firefox 3.5.2
    OS: Windows
    Attached Images

  2. #2
    Ext User
    Join Date
    Aug 2008
    Posts
    29
    Vote Rating
    0
    pourmo is on a distinguished road

      0  

    Default


    Hi

    I think this may have already been fixed in SVN, have a look at this thread.

    http://extjs.com/forum/showthread.php?t=68850

    Regards
    Mo

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    870
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    Hi.

    The other tread has nothing to do with this.
    It is ext-js stuff.

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Please use the forum search before posting bugs. This was reported several times now. I am closing this one. An fix for this will be part of the enxt release.

Thread Participants: 3