Mastering Qlik Sense

Styling your drop-down values

The self-created drop-down list seems to work brilliantly. The last step now is to style your listbox to be aware of the selection state using Qlik's green/gray/white logic based on the qState values of the dimension. The three states that can exist in our drop-down extension are the following:

• qState O: Available option to select, meant to be presented as is, unformatted
• qState S: Selected option, meant to be presented in Qlik green
• qState X: Excluded options, to be presented in gray

The only thing we need to do to achieve the desired formatting is to add CSS styles for the S and X states in our MasteringQSdrop-down.CSS file:

.qv-object-MasteringQSdrop-down .state_S { color: white; background-color: #42C24E; ...