ComboBox + Item Icons via StreamResource = ugly rendering

Hi,

i use a Combobox populated with uniform 16x16 png images assigned to individual items. Pretty ordinary stuff.

What happens when UI (page / form) featuring Combobox renders first-time is yet short but perceivable delay between moment of initial appearance and moment item image(s) gets fetched. During that period
a size of Combobox stretches / shrinks
affecting items around. That doesn’t give particularly great impression.

It bothers me that there doesn’t seem to be a way of
informing ComboBox about size of images in advance
hence give it an opportunity to compute actual size requirements accordingly. Unlike for instance Embedded class that exposes setWidth() and setHeight() methods to effectively avoid exactly same problem.

The glitch is less or no apparent if icons are defined as ThemeResources (due to caching i guess), but become apparent very much if icons are served as StreamResouces.

Anyone else experiencing the same?

Tomas

Hi,

have you tried increasing the height of ComboBox suggestion rows in CSS so that the 16x16 pngs fit inside without stretching? Open up your Firebug or tool of choice, and play with these CSS rules to see how they affect the outcome:

.v-filterselect-suggestmenu .gwt-MenuItem
.v-ff .v-filterselect-suggestmenu .gwt-MenuItem

Hi Hannu, thanks for stopping by :slight_smile:

I have taken this route to by-pass the issue:


CSS


.v-filterselect-icon16 .v-icon {
    height: 16px;
    width: 16px;
}

.v-filterselect-icon16 .v-icon + .v-filterselect-input {
    margin-left: -16px;
    padding-left: 16px;
}


Java


mySelect.addStyleName("icon16");

It’s yet not visually perfect (notice the missing 2+2 pixels in control frame), but quite acceptable for time being. I am sure the missing frames are caused by me overriding the default margin and padding attributes. It was neccessary though to stop control from wrapping caption text on next line.

Tomas