Tahoe SelectItem valueIcon sizing and positioning

[Blama]

Hi Isomorphic,

retesting this one, I noticed that the valueIcons in this sample (v11.1p_2018-01-25, SelectItem "A combobox with icons" with the flags) look blurred. This is due to the <span> being 20x20, while the icon files are 16px.
I fixed this with "valueIconSize: 16," in the sample source, but then there is a very visible gap between icon and country name. Actually the gap is also there without the sample-addition, so I think something is wrong here.

Afterwards I checked this also in my application where I have a Country-ComboBoxItem with the following pickListFields (so as img-tag, not as span-tag):

        ListGridField shortnameLGF = new ListGridField(shortnameLGFName);
        ListGridFieldCountryflag countrycodeLGF = new ListGridFieldCountryflag(DatasourceFieldEnum.T_COUNTRY__ISO_3166_1_ALPHA_2.getValue(),
                i18n.flag(), 25);

public final class ListGridFieldCountryflag extends ListGridField {
    public ListGridFieldCountryflag(String name, String title, int width) {
        super(name, title, width);
        setAlign(Alignment.CENTER);
        setType(ListGridFieldType.IMAGE);
        setImageURLPrefix("[SKINIMG]LT/flags/");
        setImageURLSuffix(".png");
        setImageSize(16);
        setCanGroupBy(false);
        setCanSort(false);
    }
}

It is also happening there, so I assume something with the positioning is indeed not OK.

Best regards
Blama

[Blama]

Hi Isomorphic,

I got it reproduced also with the pickListFields-positioning in the showcase. Please see this modified sample (v11.1p_2018-01-25, different sample because of the countryDS DataSource):

var valueMap = {
    "US" : "<b>United States</b>",
    "CH" : "China",
    "JA" : "<b>Japan</b>",
    "IN" : "India",
    "GM" : "Germany",
    "FR" : "France",
    "IT" : "Italy",
    "RS" : "Russia",
    "BR" : "<b>Brazil</b>",
    "CA" : "Canada",
    "MX" : "Mexico",
    "SP" : "Spain"
}

var valueIcons = {
    "US" : "US",
    "CH" : "CH",
    "JA" : "JA",
    "IN" : "IN",
    "GM" : "GM",
    "FR" : "FR",
    "IT" : "IT",
    "RS" : "RS",
    "BR" : "BR",
    "CA" : "CA",
    "MX" : "MX",
    "SP" : "SP"
}

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:22, type:"image", imageSize:16, imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital", showIf:"false"},
        {name:"continent", title:"Continent"}
    ],
    canReorderFields: true
});

isc.DynamicForm.create({
    ID: "form2",
    width: 620,
    colWidths: [190, "*"],
    isGroup: true,
    groupTitle: "Select / Combo Controls",
    fields : [
    {
        name: "selectItem", title: "Select", hint: "<nobr>Country-valueIcons-SelectItem</nobr>",
        editorType: "SelectItem",
        valueMap : valueMap,
        valueIcons : valueIcons,
        imageURLPrefix : "flags/16/",
        imageURLSuffix : ".png"
    },
    {
        name: "selectItem2", title: "Select", hint: "<nobr>Country-pickListFields-SelectItem</nobr>",
        optionDataSource: "countryDS",
        editorType: "SelectItem",
        pickListHeaderHeight: 0,
        pickListFields:[
        {name:"countryCode", title:"Flag", width:22, type:"image", imageSize:16, imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"}
        ]
    },
    {
        name: "selectItem2", title: "Select", hint: "<nobr>Country-pickListFields-ComboBoxItem</nobr>",
        optionDataSource: "countryDS",
        editorType: "ComboBoxItem",
        pickListHeaderHeight: 0,
        pickListFields:[
        {name:"countryCode", title:"Flag", width:22, type:"image", imageSize:16, imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"}
        ]
    }
    ]
});

isc.VStack.create({
    membersMargin: 10,
    members: [ countryList, form2 ]
});

Actually, as you can see, this also affects the flag in the normal ListGrid.

Best regards
Blama

[Isomorphic]

The default valueIconSize differs per skin, so these samples should indeed set valueIconSize to avoid the fuzziness. We'll fix the sample code.

The difference in spacing is because in one case the icon is shown in a separate field, and each field has padding. There's no bug here, but if for some reason you wanted these two scenarios to match, you would use valueIconRightPadding to adjust the spacing.

[Blama]

Hi Isomorphic,

I was talking about *vertical* positioning. Sorry for not being clear.

Best regards
Blama

[Blama]