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

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime 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

  • Captura.JPG
    Captura.JPG
    67.6 KB · Views: 358

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime 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

  • Captura.PNG
    Captura.PNG
    12 KB · Views: 293
Upvote 0
Top