Positioning problem of UploadItem in Chrome in a Window

[mattcecile]

SmartClient Version: v8.2p_2012-10-22/PowerEdition Deployment (built 2012-10-22)

I am encountering an issue under Chrome 23.0.1271.95m (compiled mode, not Dev mode) when using an UploadItem in a Window. I cannot use a FileItem since I need to post to a REST service.

What I see is that the Div generated that represents the DynamicForm gets an absolute position of -35px for some reason and chops off the left side of the dynamic form inside the window.

Here is a sample running under the Showcase that recreates the issue.

package com.smartgwt.sample.showcase.client.draganddrop;

import java.util.LinkedHashMap;

import com.google.gwt.user.client.ui.NamedFrame;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.types.Encoding;
import com.smartgwt.client.types.FormMethod;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ButtonItem;
import com.smartgwt.client.widgets.form.fields.HiddenItem;
import com.smartgwt.client.widgets.form.fields.RadioGroupItem;
import com.smartgwt.client.widgets.form.fields.UploadItem;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.sample.showcase.client.PanelFactory;
import com.smartgwt.sample.showcase.client.ShowcasePanel;

public class RecategorizeTree extends ShowcasePanel {
    private final static String RETURN_SCRIPT = 
		"if (parent.uploadComplete) parent.uploadComplete('@retcode@:@retmess@');";
    private static final String DESCRIPTION = 
        "Dragging items from the list and dropping them on categories in the tree "+
        "automatically re-categorizes the item, without any code needed. "+
        "Make changes, then reload the page: your changes persist. "+
        "This behavior is (optionally) automatic where SmartGWT can establish a "+
        "relationship via foreign key between the DataSources two components are bound to.";

    public static class Factory implements PanelFactory {
        private String id;
        public Canvas create() {
            RecategorizeTree panel = new RecategorizeTree();
            id = panel.getID();
            return panel;
        }
        public String getID() {
            return id;
        }
        public String getDescription() {
            return DESCRIPTION;
        }
    }

    public Canvas getViewPanel() {
    	
    	DynamicForm form = new DynamicForm();

    	UploadCertWindow window = new UploadCertWindow();
    	window.show();
    	return form;
    }

/**
 * Modal window to allow the user to upload a certificate to be used for SSL communications.
 */
public class UploadCertWindow extends Window {

    /** The Constant RETURN_SCRIPT. */
    private final static String RETURN_SCRIPT = 
		"if (parent.uploadComplete) parent.uploadComplete('@retcode@:@retmess@');";

    /** The Constant PADDING. */
	private static final int PADDING = 5;
	
	/** The Constant WINDOW_HEIGHT. */
	private static final int WINDOW_HEIGHT = 140;
	
	/** The Constant WINDOW_WIDTH. */
	private static final int WINDOW_WIDTH = 340;

	/**
	 * Instantiates a new upload window.
	 */
	public UploadCertWindow() {
		
		this.setTitle( "Install Certificate" );
		this.setIsModal( true );
		this.setShowMinimizeButton( false );
		this.centerInPage();
		this.setWidth( WINDOW_WIDTH );
		this.setHeight( WINDOW_HEIGHT );
		final DynamicForm form = new DynamicForm();
        form.setTarget( "hidden_frame" );
        form.setAction("rest/coremanagement/gwt/cert/uploadcert");
        form.setMethod( FormMethod.POST );
        form.setEncoding(Encoding.MULTIPART);
		form.setWidth100();
		form.setHeight100();
		form.setPadding(PADDING);  
        form.setLayoutAlign(VerticalAlignment.BOTTOM);
        
        NamedFrame frame = new NamedFrame("hidden_frame");
		frame.setWidth("1");
		frame.setHeight("1");
		frame.setVisible(false);
        form.addChild(  frame );
        
		// Set Radio Button
		final LinkedHashMap< String, String > certTypeChoices = new LinkedHashMap< String, String >();
		certTypeChoices.put( "CACert", "Intermediate CA" );
		certTypeChoices.put( "SSLCert", "SSL" );

		final RadioGroupItem certTypeRadio = new RadioGroupItem();
		certTypeRadio.setShowTitle( true );
		certTypeRadio.setTitle( "Certificate Type" );
		certTypeRadio.setVertical( false );
		certTypeRadio.setValueMap( certTypeChoices );
		certTypeRadio.setDefaultValue( "CACert" );
        
        UploadItem certFileBrowser = new UploadItem("uploadFile", "Certificate");
        certFileBrowser.setColSpan( 1 );
        certFileBrowser.setEndRow( false );
        final HiddenItem  certType = new HiddenItem ("certType");
        final HiddenItem authToken = new HiddenItem("authToken");
        final HiddenItem  returnScript = new HiddenItem ("callback");
        returnScript.setValue(RETURN_SCRIPT);

        final ButtonItem uploadButton = new ButtonItem("Upload");  
        
		form.setFields( certTypeRadio, certFileBrowser, uploadButton, certType, authToken, returnScript );
		this.addItem( form );
	}
	
}
}

The issue does not appear under Firefox or IE. Let me know if you need anything else to look into this issue.

Thanks!

Matt

[Isomorphic]

Hi Matt
Thanks for the clear test case.
We see the problem. You can solve this by setting an explicit width on the UploadItem - around 200 should work.
It's defaulting to drawing at 300px wide, which is causing the form as a whole to render larger than expected - and this ultimately is causing the mispositioning due to a quirk of how windows position and size themselves and their content.

We will be looking at whether there's a way to better handle this in the framework

Regards
Isomorphic Software

[mattcecile]

That works just fine.

Thanks again!

Matt