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

Gabino A. de la Gala

Active Member
Licensed User
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
 

Attachments

Gabino A. de la Gala

Active Member
Licensed User
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.

B4X:
' 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
#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;
}
 

Attachments

Top