layout members overlap when removing and adding at a position

[karankhokhani]

SmartGWT version
Version v9.1p_2014-06-30/Enterprise Deployment (2014-06-30)

Browser: Chrome
(works fine in IE)

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Display;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.NamedFrame;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.StaticTextItem;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.smartgwt.client.widgets.tab.events.TabDeselectedEvent;
import com.smartgwt.client.widgets.tab.events.TabDeselectedHandler;
import com.smartgwt.client.widgets.tab.events.TabSelectedEvent;
import com.smartgwt.client.widgets.tab.events.TabSelectedHandler;

public class TabTest implements EntryPoint {  
  
    public void onModuleLoad() { 
        
        HLayout canvas = new HLayout();
        canvas.setWidth(500);
        canvas.setHeight(500);
        
        TabSet tabSet = new TabSet();
        tabSet.setWidth100();
        tabSet.setHeight100();

        final Tab tab1 = createTab("Tab1");
        Tab tab2 = createTab("Tab2");        
        tabSet.addTab(tab1);
        tabSet.addTab(tab2);
        
        VLayout wrapper = new VLayout();
        wrapper.setWidth100();
        wrapper.setHeight100();
        wrapper.setBorder("1px solid red");

        
        DynamicForm form = getNewForm("Item 1", "Item 1 value");         
        final NamedFrame frame = new NamedFrame("frame");
        frame.setWidth("100%");
        frame.setHeight("100%");
        frame.setUrl("http://forums.smartclient.com/forumdisplay.php?f=14");

        wrapper.addMember(form);
        wrapper.addMember(frame);
        
        Button button = new Button("Click");
        button.addClickHandler(new ClickHandler()
        {
            
            @Override
            public void onClick(ClickEvent event)
            {
                VLayout pane = (VLayout) tab1.getPane();
                pane.removeMember(pane.getMember(0));                
                DynamicForm form = getNewForm("Item 2", "Item 2 value"); 
                pane.addMember(form, 0);
            }
        });
       
        tab1.setPane(wrapper);
        tab2.setPane(button);

        canvas.addMember(tabSet); 
        canvas.draw();
    }  
    
    private DynamicForm getNewForm(String title, String value)
    {
        DynamicForm form = new DynamicForm();
        form.setPadding(5);
        form.setMargin(10);
        form.setTitleSuffix(" :");
        form.setBorder("1px solid green");
        
        StaticTextItem item = new StaticTextItem();
        item.setTitle(title);
        item.setValue(value);
        
        form.setFields(item);
        return form;
    }
    
    private Tab createTab(final String title)
    {
        Tab tab = new Tab(title);
        String userAgent = Window.Navigator.getUserAgent();
        if (userAgent != null && !userAgent.contains("Firefox")) 
        {   
            //Workaround for bleeding issue between tabs.
            TabStateHandler stateHandler = new TabStateHandler();
            tab.addTabDeselectedHandler(stateHandler);
            tab.addTabSelectedHandler(stateHandler);
        }
        
        tab.setCanClose(false);
        return tab;
    }
    
    class TabStateHandler implements TabSelectedHandler, TabDeselectedHandler
    {
        private String display;
        private boolean getDisplayOnlyTheFirstTime = true;
        public void onTabDeselected(TabDeselectedEvent event)
        {
            Canvas pane = event.getTab().getPane();
            if(getDisplayOnlyTheFirstTime)
            {
                display=pane.getDOM().getStyle().getDisplay();
                getDisplayOnlyTheFirstTime = false;
            }
            pane.getDOM().getStyle().setDisplay(Display.NONE);        
        }
        public void onTabSelected(TabSelectedEvent event)
        {
            if (display != null)
            {
                Canvas pane = event.getTab().getPane();
                DOM.setStyleAttribute(pane.getDOM(), "display", display);
            }
        }
    }
  
}

Steps:
1. Go to tab 2 and click the button
2. go to tab 1 to see the members overlapping

[Isomorphic]

This is a recently introduced (actually re-introduced) Chrome bug with content burning through from iframes. It only seems to happen for some web sites.

The current workaround is to set hideUsingDisplayNone on the Canvas that contains the iframe - at least until Chrome fixes this again.

[karankhokhani]

I tried wrapper.setHideUsingDisplayNone(true);
but does not seem to work. The members are still overlapping. Could you please add it to the sample and let me know what needs to be done. Thanks.

[Isomorphic]

Just a note to let you know this is under investigation - we'll follow up when we have more information for you.

Regards
Isomorphic Software

[karankhokhani]

thanks for the follow up

[Isomorphic]

The problem is (unsurprisingly) the css "display:none" override. You should be able to resolve this by adding a hideUsingDisplayNone WidgetCanvas around the frame, like this:

...
        WidgetCanvas wc = new WidgetCanvas(frame);
        wc.setHideUsingDisplayNone(true);

        wrapper.addMember(form);
        wrapper.addMember(wc);
//        wrapper.addMember(frame);
...

And by removing the tab selected / tab deselected handlers which are explicitly manipulating the handle's 'display' setting.

This appears to be working for us in our testing - however for completeness, could you also let us know exactly which browser/OS combination actually requires the 'display:none' workaround to avoid the IFrame bleedthrough you were seeing?

Thanks
Isomorphic Software

[karankhokhani]

I will try the above code and get back to you.

The bleeding issue used to happen in IE/Chrome Windows and Safari Mac