B4J Question (SOLVED) How can I change the appearance of a ComboBox?

[Gabino A. de la Gala]

Attachment capture in which at design time the appearance of the buttons and the B4XComboBox are the same. However at run time the appearance of the ComboBox changes.

Thanks and best regards

 

[Erel]

All custom views look like this at design time.

B4XComboBox is based on the regular ComboBox in B4J.
You can change its color and its style:

These screenshots are taken from Forms Builder. It sets the color with the designer and changes several other attributes with a CSS file.

 

[Gabino A. de la Gala]

The main thing to keep in mind to ensure that the definitions of the css file are assigned to the combobox in question is to put the value that you have defined in the .css file (#cmbtype) in the id attribute.

' Líneas de código para que el combo cambie su apariencia:
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "style.css"))
ComboId = "cmbtype"

The content of style.css file

Spoiler: style.css content

#cmbtype .combo-box .list-cell
{
-fx-background: black;
-fx-background-color: transparent;
-fx-text-fill: -fx-text-base-color;
-fx-padding: 3 0 2 7;
-fx-cell-size: 2.66667em;
-fx-font-weight: bold;
}

#cmbtype .combo-box-popup .list-view
{
-fx-background-color: black, white;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( three-pass-box , rgba(255,255,255,1) , 10, 0.0 , 0 , 0 );
-fx-font-weight: bold;
}

#cmbtype .combo-box-popup .list-view .list-cell
{
-fx-padding: 4 15 4 15;

/* No alternate highlighting */
-fx-background-color: -fx-body-color;
}

#cmbtype .combo-box-popup .list-view .list-cell:filled:selected, #cmbtype .combo-box-popup .list-view .list-cell:filled:selected:hover
{
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-text-fill: white;
}

#cmbtype .combo-box-popup .list-view .list-cell:filled:hover
{
-fx-background-color: white;
-fx-text-fill: -fx-text-inner-color;
}
#cmbtype .combo-box-popup .list-view .list-cell
{
-fx-text-fill: white;
}


#cmbtype .combo-box-base:hover
{
-fx-color: -fx-hover-base;
}

#cmbtype .combo-box-base:showing
{
-fx-color: -fx-pressed-base;
}

#cmbtype .combo-box-base:focused {
-fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-radius: 6.4, 4, 5, 3;
-fx-background-insets: -1.4, 0, 1, 2;
}

#cmbtype .combo-box-base:disabled {
-fx-opacity: .4;
}