Styling StaticTextItem

[edulid]

How to style a StaticTextItem exactly as a TextItem ?

I don't want it to be a TextItem instead because, when using a TextItem, calling setValue("&#10142") (right arrow ➞) doesn't show the right arrow, but the string "&#10142".
I know a ";" is missing, .. but this forum changes the string to a right arrow, that's why I removed it.
(If you have a solution for how to show "&#10142" as a right arrow in a TextItem you can stop reading my post :-) ).

So I tried with a StaticTextItem, where the string is shown as an arrow.
But it is 2 pixels taller than the rest of TextItems, and when settingValue(), it gets even taller (1-2 pixels taller).
Even with staticTextItem.setHeight(20) it is still 22 pixels and it still gets taller when settingValue(""&#10142");

I styled it with:
staticTextItem.setTextBoxStyle("textItem");

Attached is a screenshot. There you see that the StaticTextItem (ElternKnoten) is taller than the rest of TextItems...

This would not be a problem if the StaticTextItem wouldn't get taller when setting the value (screenshot2), so that the whole group title moves.

Using smartGWT 4.1 v9.1p_2014-09-25/PowerEdition Deployment (built 2014-09-25)

[edulid]

Simple testcase:

public void onModuleLoad() {

		VLayout vlayout = new VLayout();

		final DynamicForm df = new DynamicForm();
		df.setIsGroup(true);
		df.setGroupTitle("Group");
		df.setNumCols(2);
		
		TextItem textItem = new TextItem("Text_Item");
		textItem.setWidth(300);
		
		final StaticTextItem staticTextItem = new StaticTextItem("Static_Text_Item");
		staticTextItem.setTextBoxStyle("textItem");
		staticTextItem.setWidth(300);
		PickerIcon clearPicker = new PickerIcon(PickerIcon.CLEAR,
				new FormItemClickHandler() {
					public void onFormItemClick(FormItemIconClickEvent event) {
					}
				});

		PickerIcon searchPicker = new PickerIcon(PickerIcon.SEARCH,
				new FormItemClickHandler() {
					public void onFormItemClick(FormItemIconClickEvent event) {
					}
				});

		staticTextItem.setIcons(clearPicker, searchPicker);
		
		df.setFields(textItem, staticTextItem);
		
		vlayout.addMember(df);
		
		IButton button = new IButton("Click me");
		button.addClickHandler(new ClickHandler() {
			
			@Override
			public void onClick(ClickEvent event) {
				staticTextItem.setValue("  ➞ ");
			}
		});
		vlayout.addMember(button);
		vlayout.setWidth(500);
		vlayout.setHeight(500);
		vlayout.draw();
	}

[Isomorphic]

We wouldn't recommend setting the StaticTextItem to look exactly like a TextItem unless you adjust things so that it clearly appears disabled, otherwise, users will try to interact with it assuming its editable.

As far as matching sizes, you need to dig into the actual CSS styles and adjust padding, borders to match. There isn't simply a built-in style that does what you want.

[edulid]

Ok, but the change of size when setting the value,... is this wanted ?

[Isomorphic]

Depending on CSS settings (eg line-height), a blank string can be considered as shorter than a non-blank string.