B4J Question ComboBox set css properties at runtime

[Alexander Stolte]

Hello,

i'm working on a great new custom view and i'm using the B4XComboBox, wich is based on the ComboBox in B4J. I need to customize the style of it, to match it with the other views style.

I need to set the following properties:

• TextAlignment
  • Right
• BackgroundColor
  • Transparent
• The arrow on the right
  • Transparent or hide

I have already tried to find a solution myself, but the settings are not applied:

CSSUtils.SetStyleProperty(ComboBox.cmbBox,"-fx-control-inner-background","transparent")
CSSUtils.SetStyleProperty(ComboBox.cmbBox,"-fx-background","transparent")
CSSUtils.SetStyleProperty(ComboBox.cmbBox,"-fx-faint-focus-color","transparent")
CSSUtils.SetStyleProperty(ComboBox.cmbBox, "-fx-text-alignment", "center")

The only setting that works is the Fonz size:

CSSUtils.SetStyleProperty(ComboBox.cmbBox, "-fx-font-size", 15)

I found the following thread where some properties are already in there, but I don't know how to change or control that at runtime.

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

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

www.b4x.com

Thanks

 

[PaulMeuris]

Have you tried something like this:

Private cbx1 As B4XComboBox

cbx1.cmbBox.Style = "-fx-background-color: #CCC8F9;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

I have found that you have to combine the style settings in one string otherwise the last setting will be taken.

 

[Alexander Stolte]

cbx1.cmbBox.Style = "-fx-background-color: #CCC8F9;-fx-border-color: #000000;-fx-border-width: 2;-fx-border-radius: 3;"

Thank you, your properties work, but the settings for the text alignment, text color etc. do not work. I am developing my own solution to solve the problem.

 

[stevel05]

The javafx combobox is a complex object, with many children. I found this css (to go in a stylesheet) that will make the arrows transparent

.combo-box .arrow, .combo-box .arrow-button{
    -fx-background-color: transparent;
}

To align text see the example here

Similarly making the background transparent could also require making changes to several of it's child views. A style sheet is probably the simplest way of doing what you want, and check out the CSS reference guide