Small Tahoe design issue when using custom textBoxStyle: "textItemLite" and showPickerIcon: false

[Blama]

Hi Isomorphic,

please see this screenshot (v11.1p_2018-01-16) where I set:

    {
        name: "itemName", title: "Item Name", editorType: "ComboBoxItem", [B]textBoxStyle: "textItemLite", showPickerIcon: false,[/B]
        optionDataSource: "supplyItem"
    },

As you can see, the ComboBoxItem is slightly less wide than normal FormItems.
I use this kind of ComboBoxItem where I do not want the user to select the entry from a list, but offer faster input though suggestions, e.g. zip codes, given names, search suggestion.

I know this is very minor, but it would be great if you could address it anyway.

Best regards
Blama

[Isomorphic]

There's no way to address this unless you expect the default size of the control to be automatically adjusted because we detect that the particular named style textItemLight has been used, which definitely isn't something we'd do. If you adjust styling, you need to adjust size to match.

[Blama]

Hi Isomorphic,

sorry, bad chosen example. Please see this modified sample (v11.1p_2018-01-16), where there is a colWidths: [190, "*"] in the DynamicForm and width: "100%" in every FormItem.

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.DynamicForm.create({
    ID: "form2",
    width: 620,
    colWidths: [190, "*"],
    isGroup: true,
    groupTitle: "Select / Combo Controls",
    fields : [{
        name: "bugStatus", title: "Select", width: "100%",
        editorType: "ComboBoxItem",
        valueMap : {
            "cat" : "Cat",
            "dog" : "Dog",
            "giraffe" : "Giraffe",
            "goat" : "Goat",
            "marmoset" : "Marmoset",
            "mouse" : "Mouse"
        }
    },
    {
        name: "itemName", title: "<span style='color: red'>This one</span>", editorType: "ComboBoxItem", textBoxStyle: "textItemLite", showPickerIcon: false,
        optionDataSource: "supplyItem", width: "100%"
    },
    {
        name: "selectItem", title: "Select", width: "100%",
        editorType: "SelectItem",
        valueMap : valueMap,
        valueIcons : valueIcons,
        imageURLPrefix : "flags/16/",
        imageURLSuffix : ".png"
    },
    {
        name: "selectItem2", title: "Select", width: "100%",
        editorType: "SelectItem",
        valueMap : {
            "red" : "<span style='color:#FF0000;'>Red</span>",
            "green" : "<span style='color:#00FF00;'>Green</span>",
            "blue" : "<span style='color:#0000FF;'>Blue</span>"
        }
    },
    {
        name: "selectItemMultipleGrid", title: "Select Multiple (Grid)",
        editorType: "SelectItem", width: "100%",
        multiple: true,
        multipleAppearance: "grid",
        valueMap : {
            "cat" : "Cat",
            "dog" : "Dog",
            "giraffe" : "Giraffe",
            "goat" : "Goat",
            "marmoset" : "Marmoset",
            "mouse" : "Mouse"
        }
    },
    {
        name: "selectItemMultiplePickList", title: "Select Multiple (PickList)",
        editorType: "SelectItem", width: "100%",
        multiple: true,
        multipleAppearance: "picklist",
        valueMap : {
            "cat" : "Cat",
            "dog" : "Dog",
            "giraffe" : "Giraffe",
            "goat" : "Goat",
            "marmoset" : "Marmoset",
            "mouse" : "Mouse"
        }
    },
    {
        name: "testTextItem", title: "Test TextItem", width: "100%", editorType: "TextItem"
    },
    {
        name: "testSpinnerItem", title: "Test SpinnerItem", width: "100%", editorType: "SpinnerItem"
    }
    ]
});

Best regards
Blama

[Isomorphic]

This is the same problem. You've changed one part of the styling but not changed the rest to match (the controlStyle - style on the controlBox).

[Blama]

Hi Isomorphic,

amazed once again. Adding controlStyle: "textItemLiteControl" does solve the issue.

Thank you & Best regards
Blama