FormItem -> setIcons -> Displayed in column not in a line

[ales]

Dear SmartGWT users,
I have problem with icons diplayed at arbitrary FormItem. I set icons by the following way:

FormItem.setIcons(new FormItemIcon(), new FormItemIcon());

But after displaying DynamicForm icons at FormItem are not displayed in a line after this FormItem as stated in the JavaDoc but in the column (first image). I do not know how to display icons in a line (second image). Any ideas?

Best regards,

Ales

[smartgwt.dev]

Post the entire code within onModuleLoad().

[ales]

Hi smartgwt.dev,
code is the following:

public void onModuleLoad() {
  StaticTextItem sti = new StaticTextItem();
  sti.setIcons(new FormItemIcon(), new FormItemIcon());

  DynamicForm df = new DynamicForm();
  df.setFields(sti);

  VLayout l = new VLayout();
  l.setWidth100();
  l.setHeight100();
  l.addMember(df);
  l.draw();
}

and icons are displayed in a column (please see image) and not in a line as I expect.

Best regards,

Ales

[Isomorphic]

You have external, non-SmartGWT CSS that is causing this problem. Find it and remove it.

[ales]

Except SmartGWT CSS:
o sc/skins/Enterprise/skin_styles.css
o sc/system/helpers/logColorizer.css

I do not have any external CSS which can be a cause of the problem. But I found that Firefox displays icons as expected - in a line (please see image form_item_firefox.png). Probably there is a problem with Enterprise skin and Internet Explorer 7.0.6001.18000.

Best regards,

Ales

[Isomorphic]

Sorry, not reproducible in the same version of IE. Look harder for external CSS, and take a close look at any browser extensions you may have installed.

[ales]

Look at the generated HTML code inside the developer console gives me the following result for Firefox:

<img src="http://localhost:8080/icon.png" id="isc_59" style="vertical-align: middle; margin-top: 0px; margin-bottom: 0px; margin-left: 3px;" suppress="TRUE" align="texttop" border="0" width="18" height="18">

and the following result for Internet Explorer:

<IMG id=isc_3A style="MARGIN-TOP: 0px; DISPLAY: block; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://localhost:8080/icon.png',sizingMethod='scale'); MARGIN-BOTTOM: 0px; MARGIN-LEFT: 3px; VERTICAL-ALIGN: middle" height=18 src="http://localhost:8080/application/sc/skins/Enterprise/images/blank.gif" width=18 align=textTop border=0 suppress="TRUE">

As you can see for Internet Explorer there is generated

DISPLAY: block

which cause a problem. For Firefox default (not present)

DISPLAY: inline

is used. From my point of view there is not any problem with external CSS or browser extension. I am using SmartGWT 1.1 and Isomorphic SmartClient Version 7.0RC_2 (2009-05-19).

Best regards,

Ales

[ales]

As a quick and dirty solution I replaced in the file sc/modules/ISC_Forms.js the following code

if(isc.Browser.isStrict&&!isc.Browser.isTransitional&&!_12)
_14[12]="display:block;

with this code

if(isc.Browser.isStrict&&!isc.Browser.isTransitional&&!_12)
_14[12]="display:inline;

and icons are displayed in the Internet Explorer in a line (it seems that other funcionality was not broken by this change). Anyway Isomorphic thanks for your support.

Best regards,

Ales

[Isomorphic]

This was a bug with standards mode only (which we don't recommend for IE - doesn't really conform to standards and is slower). It's been fixed in SVN for a while, be sure to report your version when reporting issues.

[cockroach]

Hi guys,

I don't know if this bug was fixed, but I'm experiencing this bug when try to add more than one pickerIcon, or any other kind of icon to a FormItem.

Is there an official workaround? Or should I use the one described here?

thnks

[gvangass]

I've got the same display problem on:
Firefox 3.5.9 Mozilla Firefox for Ubuntu
Ubuntu 9.10 - the Karmic Koala
smartGWT 2.2

[cockroach]

A possible solution for this problem would be:

1. to create an additional style in your CSS,
2. set all image elements which are descendent of this class to:
e.g. ".styleName * img {display:inline !important;}"
3. set element which you want to display more icons to use this style via setCellStyle("styleName").

voila

[Lucius]

Just wanted to say that I have the same issue present. Annoying, but fixable through CSS. SmartGWT 2.2

What is more annoying is when you add a icon to for example SpinnerItem it breaks the layout of the control - the up/down controls are higher then they should, because the added icon goes under them not to the right of them as it should.