I have a JavaFX app that atm is just a BorderPane with a ToolBar at the top. It looks like this:
I was wondering whether there was a way to remove the line between the top of the window and the ToolBar so that it looks something like this:
I've already tried setting the ToolBar's border width and the BorderPane's border width to 0 but neither helped.
The line is toolbar's first background color that is only shown 1px above and bottom of it. Checkout -fx-background-insets below
.tool-bar:horizontal {
-fx-background: derive(-fx-base,-30%);
-fx-background-color:
linear-gradient(to bottom, derive(-fx-base,-30%), derive(-fx-base,-60%)),
linear-gradient(to bottom, derive(-fx-base,65%) 2%, derive(-fx-base,-20%) 95%);
-fx-background-insets: 0, 1 0 1 0;
-fx-background-radius: 0, 0 ;
-fx-padding: 0.416667em 0.833em 0.416667em 0.833em; /* 5 10 5 10 */
-fx-spacing: 0.333em; /* 4 */
-fx-alignment: CENTER_LEFT;
}
To remove the top line, change the inset to:
-fx-background-insets: 0, 0 0 1 0;
To tweak default looks of JavaFX control's, I suggest to take a look at caspian.css file.
I tried amru's answer and it removed the line from the top of the toolbar. Unfortunately, there was still a line at the bottom of the window decoration. After spending a couple of hours researching this, I found that there's currently no way to do what I wanted to in JavaFX (without embedding the JavaFX in a swing window which isn't an option for other reasons) although it's a known issue and a fix is being worked on for a future release (see here).
Related
I'm not sure this css problem or something else. Javafx doesn't have css styling for text selection cursor because maybe javafx not designed to be a mobile application. When I'm searching about it. I found css styling for input caret. Like this but that's not the case for the problem i have. Any help would be appreciated.
Here there sample what i want.
Here is my javafx project after porting into android
Yes, there is a way.
JavaFX's built in controls TextField and TextArea define the caret node, using caretHandle, selectionHandle1, selectionHandle2 stackpanes with CSS style classes caret-handle and selection-handle.
This is still valid in the latest JavaFX version:
caretHandle.getStyleClass().setAll("caret-handle");
selectionHandle1.getStyleClass().setAll("selection-handle");
selectionHandle2.getStyleClass().setAll("selection-handle");
On a regular desktop platform, you would use modena.css, where the caret-handle, selection-handle style classes are not used.
However in other platforms like Android, where embedded.css or touch.css are used, these do use the style classes:
.caret-handle {
-fx-background-color: transparent,
black /*#ACACAC*/,
linear-gradient(to bottom, #AFAFAF 0%, #DFDFDF 100%);
-fx-shape: "M11.974,2.579L20,12.358V20H4V12.356L11.974,2.579z";
...
The path in -fx-shape sets the shape you have posted in your picture:
Being set by CSS, you can always override the shape with your own.
You just need to add it to your CSS file, like:
.caret-handle {
-fx-background-color: blue;
-fx-shape: "M 100,100 m -75,0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0z";
-fx-background-insets: 0;
-fx-padding: 0.5em;
}
that will give you:
I tried setting the padding to zero in css, but it only removed horizontal padding from the right and left.
I have tried the answer here, but it didn't remove the padding on top.
.review-label {
-fx-padding: 0 0 0 0;
-fx-font-size: 18px;
-fx-text-fill: #dfdfdf;
-fx-font-family: "Gnuolane Rg";
}
I played with negative numbers to remove the top padding, but this is so hard to tweak and doesn't work well with layout changes. Why isn't the top padding removed when setting it to zero? Is there a reason? and is there a solution for this?
This question already has an answer here:
Transparent background of a textarea in JavaFX 8
(1 answer)
Closed 5 years ago.
Right now in my CSS style sheet for JavaFX I have something like this. #myText is a tag in my FXML file. So what appears currently is a black textArea with red text, which is fine. I want to make the background of the textArea transparent (by changing the opacity) but keeping the text a solid color. Adding fx-opacity turns the background as well as my text transparent, so how do I get around this?
#myText{
-fx-background-color:black;
-fx-text-fill: red;
}
#myText .content {
-fx-background-color: black;
}
you can use the transparent colour to do that, it is as simple as:
-fx-background-color:transparent;
A useful source to help with more CSS commands is the Oracle JavaFX CSS reference guide
UPDATE
sorry I wasn't aware that you didn't want it fully transparent, in this case you can use:
-fx-background-color: rgba(0,0,0,0.7);
this uses the RGB colour scheme but with the ability to adjust the final value for opacity, being from 0.0 to 1.0, 0.0 obviously being completely transparent and 1.0 being completely shown.
So in my Java Application I have a grid pane with a time table of various names.
To change the color of the one my mouse is hovering over I do this:
.hours_grid_cell_pane:hover{
-fx-background-color: #ffff00;
-fx-border-color: #000000;
}
This is pretty simple. I want to know how I do the same thing to all the cells to the left, right, top, and bottom of the one I'm hovered over. Essentially forming big where my mouse is.
I've tried
.hours_grid_cell_pane:hover:left
and
.hours_grid_cell_pane:left
but that doesn't work. Is there any way to do this?
I am currently using a JavaFX TableViewin an application and experiencing the following strange behaviour:
The resize policy is set to CONSTRAINED_RESIZE_POLICY, and when I start the application, the window is not maximized. However, when I maximize the window, two things happen:
The columns do resize, but do not fill the whole space, there is still some space left on the right side.
The columns do not line up with the headings anymore.
As soon as I resize one column manually, the layout is adjusted and everything looks as expected - meaning the columns fill the whole space and line up with the headings.
This is the css I apply to the table:
.rowWithTopBorder {
-fx-background-color: #555555, -fx-background ;
-fx-background-insets: 0, 2 0 0 0;
}
.boldRow {
-fx-font-weight: bold;
}
Is there a bug or am doing something wrong?