Appearance of comboBox on 6.0 different

[edulid]

The comboboxItem appearance changed with 6.0 when the .setShowPickerIcon(false) is set.

Appearance on 5.1p with .setShowPickerIcon(false):


Appearance on 6.0p with .setShowPickerIcon(false):


Appearance on 6.0p with with .setShowPickerIcon(true):


As you see, on 6.0p, the appearance is totally different when having .setShowPickerIcon(false) or .setShowPickerIcon(true). And this was different on 5.1p.
How to get the same appearance ? Why did this change ?

[Isomorphic]

In order to have the picker icon appear inside the border, most of the styling moved to the controlStyle instead of the textBoxStyle, but the controlTable element and style are unused if there is no pickerIcon. You can see the settings used to accomplish this and the 5.1 appearance in the load_skin.js file for whichever skin you are using.

[edulid]

Ok, and how to accomplish this with the 6.0 version ?

[Isomorphic]

Again, look in the load_skin.js file for whatever skin you are using. It has two parallel sets of settings, one of which restores the 5.1 appearance.

[edulid]

In the load_skin.js I cannot find the string "controlTable".
But, anyway, why should I look in a javascript file in order to correct this ? I don't understand quite what do you mean.
"two parallel sets of settings". And what to do with these settings ?

I am using smartGWT, not smartClient in case this was not clear.

[Isomorphic]

That should have said "controlStyle" not "controlTableStyle" - we've corrected it above.

If you have any questions about the use of load_skin.js, please see the Skinning overview.

[edulid]

In the load-skin.js I cannot find the string "controlStyle".

Could you please tell me what to change specifically in order to achieve this ? This was working in 5.1 and is not working in 6.0 using the exact code.

I took a look at the Skinning overview, but still I don't know how to change this. I am not creating a new style, I just want the same behavior as in 5.1 regarding comboBoxes without a picker.
I read: "If you prefer not to create a custom skin for small customizations, you can execute JavaScript via a JSNI method in your Java code. ".
What to execute specifically here? Could you please tell me this instead of having to look at a javascript file in order to change a setting that was working perfectly with 5.1 ?

[Isomorphic]

It's inexplicable that you are having trouble finding this block of settings, since you clearly must be using the new load_skin.js file if you are seeing the new appearance, but we've copied and pasted it below. This is the one from Enterprise - you've not actually ever mentioned which skin you're using, and if it's not Enterprise, please don't ask us to go look up the settings again, you *must* have it.

Also, to clarify, the ComboBoxItem control does not have a built-in appearance for showPickerIcon:false - we would regard the appearance in 6.0, 5.1 and all previous version to be unusable. So as we see it, all versions have required that you apply your own styling if you want to work without a picker icon; there was nothing "working perfectly" in 5.1 that broke.

Further, even if you thought the 5.1 appearance was acceptable, there are several changes between 5.1 and 6.0 including box shadows, color differences and CSS transitions, so it would look weird to mix the appearances. You need to look at the styles and figure out what you want, and we can't do this for you!

How to apply your own styling is documented in great detail in the FormItem docs and with general info in the Skinning overview. Styles currently in use can be found via browser tools, interrogating components through their Java APIs, or looking in load_skin.js, which was the most convenient in this case, hence why we recommended it.

    if (isc.ComboBoxItem) {
    
        if (isc.minimalistTextControlAppearance) {

            isc.ComboBoxItem.addProperties({
                showOver:false,
                height:22,
                pendingTextBoxStyle:"selectItemLiteTextPending",
                pickerIconSrc:"[SKIN]/pickers/comboBoxPickerLite.png",
                pickerIconWidth:16,
                pickerIconHeight:18,
                showFocusedPickerIcon:false,
                controlStyle:"selectItemLiteControl",
                textBoxStyle:"selectItemLiteText"
            });
                
        } else {
            isc.ComboBoxItem.addProperties({
                textBoxStyle:"selectItemText",
                pendingTextBoxStyle:"comboBoxItemPendingText",
                showFocusedPickerIcon:false,
                pickerIconSrc:"[SKIN]/pickers/comboBoxPicker.png",
                height:22,
                pickerIconWidth:18
            })
        }
    }

[Blama]

Hi edulid,

see this thread on how to easily repair the missing right border in 5.1 for setShowPickerIcon(false)-ComboBoxItems.
Even though it seems you were happy with the default 5.1 way, perhaps this also helps in 6.0 (I'm still on 5.1).

Best regards
Blama

[edulid]

Hi edulid,

see this thread on how to easily repair the missing right border in 5.1 for setShowPickerIcon(false)-ComboBoxItems.
Even though it seems you were happy with the default 5.1 way, perhaps this also helps in 6.0 (I'm still on 5.1).

Best regards
Blama

Thank you Blama for pointing the right direction.
It was so easy as this:

comboBoxItem.setTextBoxStyle("textItemLite");
comboBoxItem.setPendingTextBoxStyle("textItemLitePending");