Increasing form field hint width problem in IE7

[AW]

Hi,

I am trying to build a form with long hints for the fields. It appears that whilst the hint will stretch to the available width in Firefox 3, it will not in IE7. It wouldn't be the end of the world if I could fix the width of the hint, but I don't seem to be able to do that either in IE7. I've inspected the styles using the IE Developer Toolbar and seen that when I use TextItem's setHintStyle method, the appropriate style is being shown by the toolbar, however, the width part of my style definition does not appear to be applied.

The problems can be illustrated by modifying the Forms / Details Hints Showcase sample (http://www.smartclient.com/smartgwt/showcase/#form_details_hints). Including and removing the call to setHintStyle both produce output with narrow hints.

    public Canvas getViewPanel() {
    	final Layout layout = new Layout();
    	layout.setWidth(500);
    	layout.setBorder("2px solid blue");
    	
        final DynamicForm form = new DynamicForm();

        final TextItem date = new TextItem();
        date.setTitle("Date");
        date.setWidth(70);
        date.setHint("MM/YYYY The month and year in which you moved to your present address");
        date.setHintStyle("hintStyle");
        
        form.setFields(date);
        
        layout.addChild(form);

        return layout;
    }

and adding the following to the bottom of public/Showcase.css:

.hintStyle {
	width: 300px; border: 1px dashed black;
}

Is this something that can be fixed in SmartGWT, or do I need to find a work-around?

Thanks,

Andrew

[Isomorphic]

Have you tried changing numCols / colWidths to the relative widths that you want?

[AW]

I have just tried experimenting with numCols and colWidths, using, for example, the following code:

		form.setWidth(400);
		form.setNumCols(3);
		form.setColWidths("20%", "20%", "60%");

I have tried both percentages (as in the above example) and absolute values, eg:

		form.setColWidths(80, 80, 200);

It appears that, in both Firefox 3 and IE7, setColWidths has no effect. I have tried using setNumCols(2), guessing that this might make the hint disappear, but that doesn't happen. I have searched the documentation and the Showcase for details / examples of how colWidths works with hints, but have found nothing. Have I missed something?

My previous post stating that the hint would stretch in Firefox 3 was based on a much more complex example. I haven't been able to recreate that in a cut down example. Also, I have not been able to successfully compile and launch the Showcase, so when testing the above, I have been using an extension of the HelloWorld sample, replacing the SC.say line with:

        	  PopupForm popupForm = new PopupForm();
        	  popupForm.show();

and where PopupForm is defined as:

package com.mycompany.client;

import com.google.gwt.user.client.rpc.IsSerializable;
import com.google.gwt.user.client.ui.PopupPanel;
import com.smartgwt.client.widgets.IButton;
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.ComboBoxItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Class that provides a popup form, with methods to show and hide it
 */
public class PopupForm extends PopupPanel implements IsSerializable {

	private VLayout container = null;
	private Layout formPanel = null;
	private HLayout buttonPanel = null;
	private IButton okButton = null;
	private IButton cancelButton = null;
	boolean editable;
	ComboBoxItem priorityField;

	/**
	 * Constructor
	 */
	public PopupForm() {
		super(false, true);

		container = new VLayout();
		formPanel = new Layout();
		container.addMember(formPanel);

		final DynamicForm form = new DynamicForm();

		final TextItem date = new TextItem();
		date.setTitle("Date");
		date
				.setHint("MM/YYYY The month and year in which you moved to your present address");
		date.setHintStyle("hintStyle");

		form.setFields(date);
		form.setWidth(400);
		form.setNumCols(3);
		form.setColWidths("20%", "20%", "60%");

		formPanel.addMember(form);

		buttonPanel = new HLayout();

		cancelButton = new IButton("Cancel");
		cancelButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent sender) {
				hide();
			}
		});
		buttonPanel.addMember(cancelButton);

		okButton = new IButton("OK");
		okButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent sender) {
				hide();
			}
		});
		buttonPanel.addMember(okButton);

		container.addMember(buttonPanel);

		this.setWidth("600px");

		setWidget(container);
		this.center();
		container.setStylePrimaryName("popup");

	}

}

I have also added the following to the bottom of HelloWorld.css:

.popup {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: white;
	border: 3px solid black;
	padding: 10px;
}

Does anyone know of any examples of successfully changing the widths of hints?

Regards,

Andrew

[Isomorphic]

On colWidths/numCols in general, take a look at the Form Layout topic in the SmartClient docs. "Topics" like this (not attached to a class) don't currently appear in the SmartGWT docs, but will soon.

Also, you don't size or place SmartClient components via CSS, it's all based on object-oriented APIs like setWidth()/setLeft() etc, and Layouts.

Let us know if the discussion of colWidths either helps you fix the problem or reproduce it in the simple case.

[AW]

Apologies for the delay in getting back to you.

Thanks for the link to the Form Layout topic. I couldn't see any reference to hints in there though.

I removed the CSS changes and container.setStylePrimaryName("popup"); in the above code and have recreated the problem in the extension to HelloWorld.

I don't know if the hint counts as a column. Therefore, I have experimented with 2 and 3 columns and specifying the widths as both percentages and absolute values. I can not get the hint width to extend beyond about 80 or 100 pixels.

Any ideas?

Thanks,

Andrew

[Isomorphic]

Hints do not count as a column, so what you want to do is leave enough space for the hint in the column where it appears, by setting a wide colWidth and a smaller width for the element that the hint shares space with. Use setCellBorder() to show where the column boundaries are.

[AW]

Hi,

Thanks for the clarification that the hint does not take up a separate column, however, I still cannot get the hint width to increase. It appears that the second argument that I pass to DynamicForm.setColWidths() is ignored. I have tried all of the following.

form.setColWidths("80", "10");
form.setColWidths("80", "300");
form.setColWidths("80", "*");
form.setColWidths(80, "*");

The results always appear as shown in the screenshot that I have uploaded and which is available to download for seven days here:

https://www.yousendit.com/download/WnBSeFVVNXZ3NUpMWEE9PQ

Looking at the styles in Firebug, I see that the table that contains the text box and the hint (isc_F) has "width: 146px;" set. Where has this width come from? Is this a bug?

My current source code for the PopupPanel is below.

Regards,

Andrew

package com.mycompany.client;

import com.google.gwt.user.client.rpc.IsSerializable;
import com.google.gwt.user.client.ui.PopupPanel;
import com.smartgwt.client.widgets.IButton;
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.ComboBoxItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Class that provides a popup form, with methods to show and hide it
 */
public class PopupForm extends PopupPanel implements IsSerializable {

	private VLayout container = null;
	private Layout formPanel = null;
	private HLayout buttonPanel = null;
	private IButton okButton = null;
	private IButton cancelButton = null;
	boolean editable;
	ComboBoxItem priorityField;

	/**
	 * Constructor
	 */
	public PopupForm() {
		super(false, true);

		container = new VLayout();
		formPanel = new Layout();
		formPanel.setWidth(450);
		formPanel.setBorder("1px solid red");
		
		container.addMember(formPanel);

		final DynamicForm form = new DynamicForm();

		final TextItem date = new TextItem();
		date.setTitle("Date");
		date
				.setHint("MM/YYYY The month and year in which you moved to your present address");
		date.setHintStyle("hintStyle");

		form.setFields(date);
		form.setWidth(400);
		form.setNumCols(2);
		form.setColWidths("80", "10");
		form.setBorder("1px solid blue");
		form.setCellBorder(1);

		formPanel.addMember(form);

		buttonPanel = new HLayout();

		cancelButton = new IButton("Cancel");
		cancelButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent sender) {
				hide();
			}
		});
		buttonPanel.addMember(cancelButton);

		okButton = new IButton("OK");
		okButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent sender) {
				hide();
			}
		});
		buttonPanel.addMember(okButton);

		container.addMember(buttonPanel);

		this.setWidth("600px");

		setWidget(container);
		this.center();

	}

}

[AW]

There is another example of this problem in post #3 from scoobydoo in the thread: http://forums.smartclient.com/showthread.php?t=3705. A reply in that thread from Isomorphic suggests that using resizeTo can solve problems when GWT and SmartGWT widgets are mixed. I think that might have been in response to the problem described in post #1 in that thread though. As the problem I've detailed in this thread is with the available width within a DynamicForm not being used by its fields and hints, I don't think calling resizeTo is the solution here.

[Segmeno]

AW pointed out very clearly where the problem is. Are there any news on this one (since I am running into the same problems, see attached screenshot)?