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;
}
Related
I'm working on my javafx project and i'm using JFoenix library. I found everything i need to edit TabPane look by CSS styling, bet one problem still remains - tabs header labels and bottom strip have some kind of blurry/shadow effects, and i can't find, how to fix this. This is my CSS now:
.jfx-tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0;
}
.tab{
-fx-pref-width: 350;
-fx-pref-height: 50;
}
.jfx-tab-pane .tab-selected-line {
-fx-background-color: -fx-secondary;
}
.jfx-tab-pane .tab .tab-label {
-fx-font-weight: normal;
-fx-text-fill: -fx-primatytext;
-fx-font-size: 16;
}
.jfx-tab-pane .tab-header-area .jfx-rippler{
-jfx-rippler-fill :-fx-secondary;
}
.jfx-tab-pane .tab-selected-line{
-fx-stroke : -fx-secondary;
}
This is how it looks like:
Can you see it? Design of tabpane headers is not flat, like other UI, it have some kind of shadow/blurry effect. Can anyone tell me, where to look to fix this problem?
I have an issue where my buttons in JavaFX become slightly smaller when clicked.
here you can see that the "change password" button is clicked/selected.
here you can see the "admin functions" button is clicked/selected.
I suspected this was something to do with the buttons having focus, as when i click chrome or another application with this running, it reverts to desired look
the buttons are currently within a 4x1 GridPane, with the 0th slot being occupied by the label.
here is my CSS if it helps:
.button{
-fx-border-color: null;
-fx-border-width: 0;
-fx-background-color: #2c3cff;
-fx-fill: true;
-fx-pref-height: 100;
-fx-pref-width: 320;
-fx-text-fill: #b9b9b9;
-fx-border-radius: 0;
-fx-min-width: 320;
-fx-min-height: 100;
-fx-background-radius: 0;
-fx-animated: false;
}
.grid{
-fx-background-color:#3e3e48;
}
.label{
-fx-text-fill: #b9b9b9;
}
Edit: I have found a temporary "solution", more of a workaround: I put
a horizontal separator just below my HBox and this allowed me to mask
the weird button size changes. would still like answers about how to
do this properly.
Thanks!
So, I figured it out after a long time of trying to use workarounds such as the separator.
The default FX stylesheet applied this to all buttons:
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
and whilst in my .button:focused definition i had set these to 0, in my .button definition i had not, so it had taken the insets value from the default CSS. by applying -fx-background-insets: 0,0,0,0,0; to both .button and .button:hover i was able to achieve the desired result.
Note: you can just type -fx-background-insets: 0; i left the full values in in case i want to change at a later date.
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've placed at the top of a BorderPane a MenuBar with a "File" Menu and a "Close" MenuItem inside:
How can I make it look thinner like the MenuBars of most of the software I use, similar to the image below?
I think it must be simple enough but as a beginner I couldn't really google it. I'm not sure how to name the problem (not many useful results for "javafx menubar height", size, styling, etc.)
Adding the following selectors to you stylesheet reduces the height of each menu element:
.menu-item { -fx-padding: 1 5 1 5; }
.menu { -fx-padding: 1 5 1 5; }
To remove the padding of all context menus, you can additionally add:
.menu .context-menu { -fx-padding: 1 1 1 1; }
And you can also decrease the font size:
.menu-item >.label {-fx-font-size:9;}
.menu >.label {-fx-font-size:9;}
Furthermore you can remove the left right padding of the MenuBar and decrease the spacing:
.menu-bar {
-fx-padding: 0 1 0 1;
-fx-spacing: 1;
};
I have a JavaFX application with a SplitPane. I want do hide the Slider/Divider of SplitPane. How can I do this?
Greetings from Germany (so sorry for my english)
Julian
Its a little different in Java FX8 (modena style):
.split-pane *.split-pane-divider {
-fx-padding: 0 1 0 1;
}
In caspian.css, you will see
/* horizontal the two nodes are placed to the left/right of each other. */
.split-pane:horizontal > * > .split-pane-divider {
-fx-border-color: transparent -fx-box-border transparent #BBBBBB;
-fx-background-color: transparent, -fx-inner-border-horizontal;
-fx-background-insets: 0, 0 1 0 1;
}
/* vertical the two nodes are placed on top of each other. */
.split-pane:vertical > * > .split-pane-divider {
-fx-border-color: #BBBBBB transparent -fx-box-border transparent;
-fx-background-color: transparent, -fx-inner-border;
-fx-background-insets: 0, 1 0 1 0;
}
I am using a vertical one, so I overrided the vertical one in my css as following:
.split-pane:vertical > * > .split-pane-divider {
-fx-border-color: transparent;
-fx-background-color: transparent;
-fx-background-insets: 0;
}
And it works. If you want to hide the grabbers too (e.g. I did not hide it, it seems nice), I think the following rule might do the trick:
.split-pane *.vertical-grabber {
-fx-padding: 0;
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-shape: " ";
}
I hope it helps.
These other answers still left a thin gray bar so in my CSS I added:
.split-pane-divider {
-fx-background-color: transparent;
}
Another Note:
The divider appears between the children in the Split Pane's list of items. If your split pane only has one item in it, you won't see a divider. If your split pane has 3 items, you will see 2 dividers. If you need to get rid of a divider, you may not need an item in the split pane at all. So just remove the item from the Split Pane's list of items temporarily.
Late, but this is how to do it correctly instead of working around it using CSS:
for (Node node : splitPane.lookupAll(".split-pane-divider")) {
node.setVisible(false);
}
SplitPane.Divider doesn't inherit from Node, therefore it hasn't a disableProperty.
If you need to have a split pane to be resized JUST from the code, you can skin the divider through CSS to be invisible and with a size near 0.
Otherwise use AnchorPane's nested into a VBox