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
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 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've tried a lot to remove the stage buttons in my JFX project frame. I'm using a decorator to fresh up the design.
I only want to remove the maximize, resize and minimize buttons. The close button should not be removed. Can you give me a tip, how I can deal with this?
JFXDecorator decorator = new JFXDecorator(primaryStage, gridContainer);
I've tried this to remove the resizable button this way:
primaryStage.setResizable(false);
.jfx-decorator{
-fx-decorator-color: #2196F3;
-fx-text-fill: black;
-fx-background-color: transparent;
-fx-border-color: #2196F3;
}
.jfx-decorator .jfx-decorator-buttons-container{
-fx-background-color: -fx-decorator-color;
}
.jfx-decorator .resize-border{
-fx-border-color: #2196F3;
-fx-border-width: 0 4 4 4;
}
.jfx-decorator .jfx-decorator-buttons{
-fx-background-color: red;
}
You have to pass the exact number of arguments.
boolean values are...
1 full screen
2 Maximize/Restore
3 Minimize
JFXDecorator decorator = new JFXDecorator(mainStage, root, false, false, false);
It is actually pretty simple.
If you take a look into the constructor of the decorator:
public JFXDecorator(Stage stage, Node node) {
this(stage, node, true, true, true);
}
You can set the three Boolean values to false, which exceeds to the wanted solution.
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 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