Select Text Box Item - now references the CSS class selectItemLiteText, Want to use CSS class selectItemText

[tece321]

Version: SmartClient Version: v12.1p_2020-07-31/PowerEdition Deployment (built 2020-07-31)

Our selectBoxItem class appears different in this version. Looks like this:


It used to look (2020-02-27) like this:



I tracked it down to selectBoxItem in our 2020-02-27 version was referencing CSS class selectItemText, whereas in 2020-07-31 it is using CSS class selectItemLiteText.

I see in the load_skin.js there is this code:

// isc.minimalistTextControlAppearance (new property, consulted below)
// - Show minimalist drop down controls by default?
// When true, SelectItem and ComboBoxItems will appear with modern "flat" styling
// including inline picker icon rather than picker icon button.
// - Set to false to restore traditional appearance for these controls
// --------------------------------------
if (isc.minimalistTextControlAppearance == null) {
isc.minimalistTextControlAppearance = true;
}

and finally 

 if (isc.SelectItem) {

if (isc.minimalistTextControlAppearance) {
isc.SelectItem.addProperties({
showOver:true,
updateTextBoxOnOver:false,
updateControlOnOver:true,

height:22,
pickerIconSrc:"[SKIN]/pickers/comboBoxPickerLite.png",
pickerIconWidth:16,
pickerIconHeight:18,
valueIconSize:12,
showFocusedPickerIcon:false,
textBoxStyle:"selectItemLiteText",
controlStyle:"selectItemLiteControl"
});

} else {

isc.SelectItem.addProperties({
height:22,
pickerIconSrc:"[SKIN]/pickers/comboBoxPicker.png",
pickerIconWidth:18,
valueIconSize:12,
showFocusedPickerIcon:false,
textBoxStyle:"selectItemText"
});
}
}

So I assume our application is now defaulting to the isc.minimalistTextControlAppearance == null case.

Also I see that in skin_style.css there is this comment /code:

/* suppress borders on selectItem text - border is applied to control element
   also zero out right-padding so we don't have unnecessary gap between text and
   the down-pointing chevron */
.selectItemLiteText,
.selectItemLiteTextRTL,
.selectItemLiteTextFocused,
.selectItemLiteTextFocusedRTL,

What is the appropriate way of changing this behavior? Is it to override the check/setting in load_skin.js ? We may like to make use of the selectItemLiteText css style in the future so I don't want to rule out its usage in our projects permanently.

Thanks

[Isomorphic]

You can solve this by setting the property isc.minimalistTextControlAppearance to false after the SmartClient modules have been loaded in your page, but before the "load_skin.js" file load.
For example, you could do this in your bootstrap HTML file:

<SCRIPT>window.isomorphicDir="someApp/sc/";</SCRIPT>

<script type='text/javascript' src='someApp/sc/modules/ISC_History.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_FileLoader.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Core.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Foundation.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Containers.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Grids.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Forms.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_DataBinding.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Calendar.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Drawing.js'></script>
<script type='text/javascript' src='someApp/sc/modules/ISC_Tools.js'></script>
<script>
    isc.minimalistTextControlAppearance = false;
</script>

<SCRIPT SRC='someApp/sc/skins/Enterprise/load_skin.js'></SCRIPT>

<!-- load the gwt application code -->
<script type="text/javascript" src="someApp/someApp.nocache.js"></script>

Note - normally the SmartGwt module will handle loading the modules and skin automatically, so you don't need script tags like this in your bootstrap. This approach requires you modify your gwt.xml file to inherit the 'NoScript' variant of the SmartGwt module, and the 'Resources' variant of your theme.
Something like this:

    <inherits name="com.smartgwt.SmartGwtNoScript"/>
    <inherits name="com.smartclient.theme.enterprise.EnterpriseResources"/>

Regards
Isomorphic Software

[tece321]

Thanks. Your suggestion worked.

I'm interested to know how or if you intend BOTH css styles to be available to the app? Is it possible to intermix the usage of selectItemLiteText and selectItemText styles? It seems like it is only controlled by the setting of isc.minimalistTextControlAppearance flag. And if that's true should not the default be in load_skin.js "

  

 if (isc.minimalistTextControlAppearance == null) {
        isc.minimalistTextControlAppearance = false;
    }

?

[Isomorphic]

The change to a modern 'minimalist' text appearance in the Enterprise series skins was a design decision we made some time ago in response to significant requests. It caused changes to multiple form items (changing their css class, their media and possibly other things like default sizing). Search through load_skin.js to see exactly what is changed when this flag is enabled.

We provided the minimalistTextControlAppearance flag as a way to revert it for any specific applications where it was not appropriate, and might cause backwards compatibility woes for developers.

It is possible to create form items using both the minimalist and the traditional appearance on the same page, in Enterprise, but we don't supply a simple flag to achieve this.
Instead you'd want to modify the properties (textBoxStyle, etc) on your items directly

It's also worth mentioning that the Enterprise skin is no longer the default and if you are looking to modernize the appearance of your application going forward you may want to look at Tahoe and similar skins as well.

Regards
Isomorphic Software