Iam trying to change the TextColor of an ChoiceBox in JavaFX.
This is my css file:
.choice-box{
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-padding: 3 10 4 20;
-fx-text-fill: white;
-fx-font-size: 12px;
}
And this is a screenshot of my choice-box:
-fx-text-fill: white; works on buttons but not on choic boxes. Why?
How can i change the color of the text in the choicebox?
i think you can do:
.choice-box .label {
-fx-text-fill: white;
}
You should give these properties to the listcell and not the choice-box. Refer this : http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#labeled
Hope it helps
Related
I added a MenuButton and assigned an icon for its graphic. Whenever I hover over the graphic, the color changes from black to blue. The problem is, I don't need to precisely hover over the graphic in order to open the menu. If I were to click on any of the places marked with the red dots the options appear below.
I've looked around and managed to remove as many things as I could find using the following CSS:
#menubutton {
-fx-background-color: transparent;
-fx-background-insets: 0 0 0 0;
-fx-border-color: transparent;
-fx-padding: 0;
}
#menubutton > .arrow-button {
-fx-background-color: transparent;
-fx-padding: 0;
}
#menubutton > .arrow-button > .arrow {
-fx-background-color: transparent;
-fx-padding: 0;
}
But if clicking on those places stills opens the menu options, then it seems like there's still some space between the icon and the border of the button. In this example you can see the space more clearly.
Is there a way to either remove that space or give an icon the functionality of a MenuButton without the button itself?
P.S. The other icons work fine because they're by themselves and not as a graphic in a button.
You need to also turn off the padding to the label within the menu button.
#menubutton > .arrow-button,
#menubutton > .label{
-fx-background-color: transparent;
-fx-padding: 0;
}
I'm working on a TextField and just get a strange "extra border" I can't identify where it is comming from.
My UI looks like this (the extra border is in grey, the ordinary border I painted red in my CSS for debug):
FXML excerpt:
<HBox fx:id="sliderControlPane" styleClass="parameterSliderControlPane"
alignment="CENTER" visible="false">
<Slider fx:id="parameterSliderControl" styleClass="parameterSliderControl"
prefWidth="195" />
<Pane prefWidth="14"/>
<TextField fx:id="parameterSliderControlValue" styleClass="parameterSliderControlValue"
prefWidth="70"/>
</HBox>
CSS excerpt:
.parameterSliderControlPane {
-fx-padding: 0.0 5.0 0.0 5.0;
}
.parameterSliderControlValue {
-fx-border-color: #f00;
-fx-border-radius: 8.0;
-fx-font-size: 20.0;
-fx-padding: 0.0 4.0 0.0 4.0;
-fx-alignment: center-right;
}
.parameterSliderControl .track {
-fx-padding: 4.0;
}
.parameterSliderControl .thumb {
-fx-border-color: #aaa;
-fx-border-radius: 12.0;
-fx-background-color: #fff;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-padding: 14.0;
}
I don't think it is related, but for information, I keep track of consistency between the slider and the text field adding a listener to the text field, to update slider value or rollback text field value according to the input in the text field:
#Override
public void initialize(URL location, ResourceBundle resources) {
(...)
this.parameterSliderControlValue.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
if (!isNowFocused) {
(...)
//check wether input is valid
//if yes, update slider value with text field value
//if no, update text field value with slider value
}
}
}
I can't understand why this extra border is popping out in the background of the text field border. Does it come from the text field and I am supposed to set some parameter to hide it? Or it does come from another UI element I can't figure out?
I couldn't find any suspected parameter at official JavaFX CSS reference page (https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html)
Thank you!
As of #fabian comments, it turned out to be due to default theme (modena.css), which I found in the following link:
gist.github.com/maxd/63691840fc372f22f470
Line 1266 defines .text-input entry, which was responsible for the duplicated border. It does not define border parameters directly, but indirectly generates the extra border by background related parameters:
.text-input {
-fx-text-fill: -fx-text-inner-color;
-fx-highlight-fill: derive(-fx-control-inner-background,-20%);
-fx-highlight-text-fill: -fx-text-inner-color;
-fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
-fx-cursor: text;
-fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
Solution to my particular case was to override -fx-background-color in my CSS. The final CSS is, though:
.parameterSliderControlValue {
-fx-border-color: #f00;
-fx-border-radius: 8.0;
-fx-font-size: 20.0;
-fx-padding: 0.0 4.0 0.0 4.0;
-fx-alignment: center-right;
-fx-background-color: transparent; //this line has been added to solve the problem
}
I'd like to see the list of items the same width like it's title:
But actual picture is:
And I haven't found any styles of ChoiceBox's item list in scene builder.
Is there any style to add in css file to make items list the same width and position?
Current styles:
ChoiceBox {
-fx-min-width: 28px;
-fx-min-height: 42px;
-fx-font-size: 16px;
-fx-background-radius: 0;
-fx-background-color: #ffffff;
-fx-border-width: 1px;
-fx-region-background: #000000 /
-fx-mark-color: #757575;
-fx-border-color: #C5C5C5;
}
Element declaration:
#FXML private ChoiceBox channelPicker;
private ObservableList<String> channelItems = FXCollections.observableArrayList("DAC 1", "DAC 2", "DAC 3", "DAC 4");
channelPicker.setItems(channelItems);
channelPicker.getSelectionModel().selectFirst();
Thanks in advance!
You can add a context-menu option to your choice-box css as follow:
.choice-box {
-fx-pref-width: 220;
}
.choice-box .context-menu {
-fx-pref-width: 220; /* Your width for the context menu background shown */
}
I want my choicebox to look the same before and after a user selects something and not have any focus indicator. Web searches indicate that I should be adjusting -fx-focus-color: and -fx-faint-focus-color: but I cannot seem to get it to act consistent. I use transparent (below) because ANY color other than transparent makes a wide glow around the choicebox after a selection.
default look, no css settings
before select:
after select:
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
before select:
after select:
-fx-faint-focus-color: transparent;
before select:
after select:
-fx-focus-color: transparent;
before select:
after select:
Try this.
.choice-box:focused {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
}
You can see default css(= modena.css) at here: OpenJDK/openjfx/8/master.
The above code is only differences between .choice-box and .choice-box:focused.
I am building a small application with JavaFX + FXML and I'm trying to implement some simple CSS to have a specific style.
I have an issue with the Combobox element. Indeed by default its color is grey:
And I would like to have it white (or transparent), and keep the borders, to match the same style as the Text Field. So I tried to set the background color to transparent but there is a side effect: The borders become transparent too!
Here is the CSS i have added:
.root {
-fx-font-size: 11pt;
-fx-font-family: "Verdana";
-fx-background: #FFFFFF;
}
.normal-label {
-fx-text-fill: #005EB8;
}
.normal-text-field {
-fx-text-fill: #333333;
}
.combo-box {
-fx-background-color: transparent;
}
I am not at all used to CSS writing, so maybe I completely miss something out. Is it that the combobox does not define borders? So I have to override the borders and find out what are the borders of the Text Field?
ComboBox inherits its CSS style from ComboBoxBase.
The ComboBox control has all the properties and pseudo‑classes of
ComboBoxBase.
The default CSS style class of ComboBoxBase is defined as:
.combo-box-base {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-fx-text-fill: -fx-text-base-color;
-fx-alignment: CENTER;
-fx-content-display: LEFT;
}
You can overwrite this style class like:
.combo-box-base {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, white;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
}
This style-class just sets the inner part to white, the border is actually untouched (remove the last two properties and then you will get a plain white borderless ComboBox).
Note:
Overwriting .combo-box-base or .combo-box style-classes are equivalent if only ComboBoxes are used.
The reason in the answer to use .combo-box-base style-class rather than the other one is that there are other controls inheriting also the .combo-box-base style-class, such as ColorPicker and DatePicker. Overwriting .combo-box-base yields in having all these controls sharing the same style, resulting in a much unified design.
You can add the following properties to control the border:
-fx-border-color: #D3D3D3
-fx-border-width: 1 1 1 1