Develop Reference

Dinamically changing the font size and its style in the TextArea causes padding bugs

I am creating a small text editor with JavaFX.
For this purpose I use TextArea and ComboBox'es to dynamically style it: e.g. changing the font, it's size, making it bold, italic and so on. It kind of works, however there is a disturbing visual bug that I can't put up with.
I tried to narrow the problem and here is a simpler code that has the same behavior and a couple of pics to understand what I'm talking about:
(to reproduce the bug set the size to 70 then choose bold and you will see how the text steps away from the edge.)
public class Main extends Application {
public void start(Stage stage) {
textArea = new TextArea("TEST 112123");
textArea.setPrefWidth(800);
textArea.setPrefHeight(400);
textArea.setLayoutY(40);
CheckBox bold = new CheckBox("BOLD");
bold.setLayoutX(20);
bold.setOnAction(e -> {
Font currentFont = textArea.getFont();
if (bold.isSelected()) {
textArea.setFont(
new Font("System Bold", currentFont.getSize()));
//I set new Font each time to save all of it's past properties and
//change only one of them, this is the only way that I found to do
//this as there are no setters in the Font class, only constructors
} else {
textArea.setFont(
new Font("System", currentFont.getSize()));
}
});
ComboBox sizeBox = new ComboBox();
//I removed the list of options and the input validity check
sizeBox.setLayoutX(80);
sizeBox.setEditable(true);
sizeBox.setOnAction(e -> {
textArea.setFont(new Font(textArea.getFont().getName(),
Double.valueOf((String)sizeBox.getValue())));
});
stage.setScene(new Scene(new Group(textArea, bold, sizeBox), 800, 500));
stage.show();
}
}
images: https://imgur.com/a/Cg53nAL

You can add the following stylesheet.
.text-area .content {
-fx-padding: 3 7 3 7;
}
It overrides the padding from modena.css:
.text-area .content {
/*the is 1px less top and bottom than TextInput because of scrollpane border */
-fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
-fx-cursor: text;
-fx-background-color:
linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
-fx-background-radius: 2;
}

Get rid of duplicated border on javafx.scene.control.TextField

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
}

Controlfx - Rating width

I am using RatingBar from Controlfx.
I´d like to bind the width value, but It dont allow to be a value < 248.
#FXML
private Rating vipRating;
vipRating.prefWidthProperty().bind(ratingVBox.prefWidthProperty());

RatingBar has a padding value in CSS for button selector:
.rating > .container > .button {
-fx-background-color: transparent;
-fx-background-image: url("unselected-star.png");
-fx-padding: 16 16;
-fx-background-image-repeat: no-repeat;
}
We should remove this padding.
.rating > .container .button {
-fx-background-size: cover;
-fx-padding: 0;
}
We also should apply the width/height value to the button instead of the rating box.
.rating > .container .button {
-fx-pref-width: 20 ;
-fx-pref-height: 20 ;
-fx-background-size: cover;
-fx-padding: 0;
}
And to make this work programatically, there is another undocumented behavior:
If you do:
ratingHeigth.bind(mainBorderPane.prefHeightProperty());
vipRating.styleProperty().bind(Bindings.concat(".rating > .container .button{ -fx-pref-height: ", ratingHeigth.asString(), ";}"));
It wont work due to inline styles simply apply the actual style specified by the string to the node on which you call setStyle(...): an inline style does not include selectors.
So we should create a CSS variable in CSS file, like this:
.rating {
button-width: 32;
button-height: 32;
}
.rating > .container .button {
-fx-pref-width: button-width;
-fx-pref-height: button-height;
-fx-background-size: cover;
-fx-padding: 0;
}
Now inline style should be applied to the new CSS variable.
ratingWidth.bind(centerPane.prefWidthProperty());
vipRating.styleProperty().bind(Bindings.concat("button-width: ", ratingWidth.asString(), ";"));

You could something like this:
DoubleBinding minPrefBinding = Bindings.createDoubleBinding(() -> {
if(ratingVBox.getPrefWidth() < 248.0){
return 248.0;
}
return ratingVBox.getPrefWidth();
}, ratingVBox.prefWidthProperty());
vipRating.prefWidthProperty().bind(minPrefBinding);

Adjust the minimum width: vipRating.setMinWidth(Region.USE_PREF_SIZE); or vipRating.setMinWidth(0);.
Edit:
Looking into the ControlsFX Source it seems the Rating control uses PNG graphics for its appearance. These icons are 32x32 pixels and the container aligning the 5 star icons has a spacing of 4.
Easy math: (32 + 4) * 5 - 4 = 176.
176 is the minimum width this control can have. You might override the CSS and remove the spacing, this will give you another 16 pixels, so you'll end up with 160 pixels.
Demo App showing printing the minimum size:
#Override
public void start(Stage primaryStage) throws Exception {
final Rating rating = new Rating();
final BorderPane pane = new BorderPane(rating);
pane.setMaxWidth(Region.USE_PREF_SIZE);
primaryStage.setScene(new Scene(pane));
primaryStage.show();
Platform.runLater(()->System.out.println(rating.getWidth()));
}
And if you really want to remove the spacing, just add the following CSS rule:
.rating > .container {
-fx-spacing: 0;
}

JavaFX ComboBox CSS style

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

JavaFX choicebox text color

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