Styling SelectItem

[Developer12145]

Hi Isomorphic,

I want a different Styling for a specific SelectItems picklist, see the pictures below:


Picture 1: SelectItem


Picture 2: The SelectItems picklist

1. How can I apply a different CSS to that list? I already tried the proposed styling options including setPickListBaseStyle() with "customcell" as argument.

Here is the CSS:

.customcell,
.customcellSelected,
.customcellSelectedOver,
.customcellSelectedDown,
.customcellOver,
.customcellFocused,
.customcellDown
{
color: black;
font-size: 20px;
border-bottom: 1px solid <customerColor>;
}

But either way, it does not apply the css. Do I have to use one of the autoChild methods to achive that? If yes, could You please give an short example?

2. Is there a way to center the elements within the rows?


Setup:
SmartClient Version: v11.1p_2018-05-30/PowerEdition Deployment (built 2018-05-30)
Browser: Cordova WebView for Android and iOS

Thanks in advance,
Kind Regards

[Isomorphic]

1. pickListBaseStyle is indeed how you would customize cell styling for a SelectItem's pickList, and works in our testing (and is also obviously used by our own skins to affect different styling in each skin).

Let us know if you can show a reproducible case where this property does not behave as documented.

2. elements are centered by default - nothing to do here

[Developer12145]

Thanks for the quick response!

In my case, I got the following:

        FormItem statusAfterEstCloseDate;

[...]

    statusAfterEstCloseDate = sc.getSomeSettingsMap()
                    .get(DatasourceFieldEnum.V_SOMETHING_ESTIMATEDCLOSINGDATE.getValue()).getConfiguredFormItem();

[...]

The Method getConfiguredFormItem() does the following:

    public FormItem getConfiguredFormItem() {
        FormItem fi = null;
        switch (getWidgetclass()) {
        case TEXTITEM:
            fi = new TextItem(getShortName());
            break;
        case SELECTITEM:
            fi = new SelectItem(getShortName());
            break;
        case COMBOBOXITEM:
            fi = new ComboBoxItem(getShortName());
            break;
        case SPINNERITEM:
            fi = new SpinnerItem(getShortName());
            break;
        case DATEITEM:
            fi = new DateItem(getShortName());
            ((DateItem) fi).setUseTextField(true);
            break;
        case DATETIMEITEM:
            fi = new DateTimeItem(getShortName());
            break;
        case BOOLEANITEM:
            fi = new BooleanItem(getShortName());
            break;
        // FormItem is default
        case FORMITEM:
        default:
            fi = new FormItem(getShortName());
            break;
        }

        configureFormItem(fi, this);
        return fi;
    };

As you can see, it returns a FormItem instead of a SelectItem. I tried at this point to cast the FormItem fi like below and set the PickListBaseStyle:

[...]
case SELECTITEM:
            fi = new SelectItem(getShortName());
           ((SelectItem)fi).setPickListBaseStyle("customcell");
            break;

[...]

It seems like it does not apply the CSS when its casted. Do You have any idea what the problem is?

Thanks in advance,
Kind Regards

[Isomorphic]

Since the API works for us and you've shown only partial code, and nothing we can run, this hasn't moved things forward.

Try a simplified sample to verify that the API works for you in that simplified case. Then try modifying your code to bring you closer to the simpler case, until you find the problem,