I want to remove the inner shadow in TextField.
Here is css.
-fx-font-size: 12px;
-fx-font-family: "Segoe UI Semibold";
-fx-pref-width:250px;
-fx-pref-height:35px;
-fx-background-radius:0px;
Try adding this line:
-fx-background-color: -fx-text-box-border, -fx-control-inner-background;
The problem is that it is NOT shadow. It is a specially decorated background. So making it transparent or putting a key which its value is transparent will work well.
.text-field {
-fx-text-box-border: transparent;
-fx-background-color: transparent;
}
.text-field:focused {
-fx-faint-focus-color: transparent; /*JavaFX 8*/
-fx-focus-color: transparent; /*JavaFX 2.2*/
}
The style code above(style.css) will generate a text field without any border and background and make it clear. By the way putting -fx-border-color or -fx-faint-color instead of transparent in -fx-background-color is completely fine since their value is transparent.
Edit: I'm adding now a little example code.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.control.TextField;
import javafx.scene.paint.Color;
import javafx.scene.layout.Pane;
public class TextFieldDemo extends Application {
public void start(Stage primaryStage) {
TextField textField = new TextField();
textField.setPromptText("TextField");
textField.setMaxWidth(100);
textField.setLayoutX(50);
textField.setLayoutY(25);
textField.setFocusTraversable(false);
Rectangle background = new Rectangle(40, 20, 120, 40);
background.setStyle("-fx-arc-width: 40px; -fx-arc-height: 40px;-fx-fill: yellow;");
Scene scene = new Scene(new Pane(background, textField), 200, 80);
scene.getStylesheets().add("style.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Example Output:
Example Image
Related
How can i move the pagination to the bottom right while the content of the pagination stays centered
<Pagination fx:id="paging" maxPageIndicatorCount="5" pageCount="0" prefHeight="1010.0" prefWidth="1150.0" StackPane.alignment="CENTER_RIGHT">
Page controls and page info right aligned
You can use this CSS to align the pagination controls to the right.
.pagination {
-fx-page-information-alignment: right;
}
.pagination > .pagination-control > .control-box {
-fx-alignment: bottom-right;
-fx-padding: 0.416em 1.1em 0 0;
}
The right padding of 1.1em on the control box is to allow room for the right aligned page information (the thing that says "x/N" where x is the current page and N is the max pages).
Page controls right aligned with no page info
If you don't want page information at all then you can make the right alignment 0em instead of 1.1em (or just define no padding as the default right padding is 0), and set -fx-page-information-visible: false instead of setting -fx-page-information-alignment.
.pagination {
-fx-page-information-visible: false;
}
.pagination > .pagination-control > .control-box {
-fx-alignment: bottom-right;
}
Centering page content
To have the content of each page centered, place each page in a StackPane as in the example.
How to learn how to write this yourself
Info on styling Pagination is available in:
CSS reference guide Pagination section.
modena.css file found in your JavaFX installation, for example:
javafx-controls-17.0.0.1-mac.jar -> com/sun/javafx/scene/control/skin/modena/modena.css.
Example App
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Pagination;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class PageAlign extends Application {
private static final String CUSTOM_PAGINATION_CSS = """
data:text/css,
.pagination {
-fx-background-color: lemonchiffon;
-fx-page-information-alignment: right;
}
.pagination > .pagination-control > .control-box {
-fx-alignment: bottom-right;
-fx-padding: 0.416em 1.1em 0 0;
}
""";
#Override
public void start(Stage stage) {
final Pagination pagination = new Pagination();
pagination.getStylesheets().add(CUSTOM_PAGINATION_CSS);
pagination.setPageFactory(this::generatePage);
pagination.setMaxPageIndicatorCount(6);
pagination.setPageCount(6);
pagination.setPrefSize(250, 140);
stage.setScene(new Scene(pagination));
stage.show();
}
private StackPane generatePage(Integer idx) {
StackPane page = new StackPane(
new Label("Page Content " + (idx + 1))
);
page.setStyle("-fx-background-color: lightblue;");
return page;
}
public static void main(String[] args) {
launch(args);
}
}
I'm working with JavaFX 8 on Windows 10. In a WebView with a dark background, I can see the light grey corner when the scrollbars are visible. WebView"manages scrolling automatically." I already tried this, as well as other selectors:
.corner {
-fx-background-color: black;
}
And also
.corner {
-fx-background-color: black;
}
.scroll-bar > .corner {
-fx-background-color: black;
}
.scroll-pane > .corner {
-fx-background-color: black;
}
.scroll-bar .corner {
-fx-background-color: black;
}
.scroll-pane .corner {
-fx-background-color: black;
}
.web-view .scroll-bar .corner {
-fx-background-color: black;
}
.web-view .scroll-pane .corner {
-fx-background-color: black;
}
But it doesn't work. So what could I do?
Example code: Main class
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.loadContent("<html><body><pre>This is a very very very very very very long string </pre><b>test</b><p>1</p><p>2</p><p>3</p></body></html>");
webEngine.setUserStyleSheetLocation("data:,body { background: black; color: white; } ");
StackPane root = new StackPane();
root.setPadding(new Insets(5));
root.getChildren().add(webView);
webView.setStyle("-fx-background-color:black;");
root.setStyle("-fx-background-color:black;");
root.getStylesheets().add("style.css");
primaryStage.setTitle("JavaFX Test");
primaryStage.setScene(new Scene(root, 300, 150));
primaryStage.show();
}
}
style.css
.scroll-bar .track {
-fx-background-color: black;
}
.scroll-bar .thumb {
-fx-background-color: brown;
}
.corner {
-fx-background-color: black;
}
This also has an awful behavior where the scrollbars only appear when I hover with the mouse, but nevermind. This doesn't happen in my main application. I just want to change the color of the grey square in the corner.
I am unable to reproduce the effect on Mac OS X v10.13.6 with Java v1.8.0_201. Because WebView "manages scrolling automatically" and JavaFX uses WebKit, #Pagbo suggests using -webkit-scrollbar-corner, as suggested here. In another context, #DVarga suggests using -fx-background-color, as shown here. As the effect may be platform/version dependent, I've added a complete example and screenshot for reference. In particular, the lower-right corner is overlain by the vertical scrollbar's decrement button. Stretching the window to hide the vertical scrollbar reveals the horizontal scrollbar's increment button. The corner is always occupied by a scrollbar button or black.
Main.java
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.loadContent("<html><body><pre>"
+ "This is a very very very very very very long string<br>"
+ System.getProperty("os.name") + " v"
+ System.getProperty("os.version") + "; Java v"
+ System.getProperty("java.version")
+ "</pre><b>test</b><p>1</p><p>2</p><p>3</p></body></html>");
webEngine.setUserStyleSheetLocation("data: ,body "
+ "{ background: black; color: white; } "
+ "::-webkit-scrollbar-corner { background: #0c0c0c; } ");
StackPane root = new StackPane();
root.setPadding(new Insets(5));
root.getChildren().add(webView);
webView.setStyle("-fx-background-color:black;");
root.setStyle("-fx-background-color:black;");
root.getStylesheets().add("style.css");
primaryStage.setTitle("JavaFX Test");
primaryStage.setScene(new Scene(root, 300, 150));
primaryStage.show();
}
}
style.css
.scroll-bar .track {
-fx-background-color: black;
}
.scroll-bar .thumb {
-fx-background-color: brown;
}
.corner {
-fx-background-color: black;
}
I want my button to have a transparent black bar on the bottom with a opacity of 75%. The button name should appear on top of the black bar. I have drawn a draft below.
So far I have tried with no success:
.button{
-fx-background-color: #5a9bdc;
-fx-font-size: 16;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-fill: #ffffff;
}
.button:hover {
-fx-background-color: #97c0dc;
}
UPDATE:
So this is how my css looks:
.button-stats.parent{
-fx-background-color: #5a9bdc;
-fx-font-size: 16;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-fill: #ffffff;
}
.button-stats:hover {
-fx-background-color: #97c0dc;
}
.button-stats.element{
padding: 20px;
color: rgba(255,255,255,.4);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here is a sample, it isn't going to be exactly what you want, but may help you in getting to where you want. It is based upon button styles found in modena.css in the jfxrt.jar that ships with Java 8.
Images are shown for unhovered and hovered and armed states (armed is when the button is pressed and the shadow is removed).
I did not provide info here for a focused state, so you will need to develop that yourself if you want it.
super-button.css
.button {
-custom-solid-button-color: lightgreen;
-custom-translucent-button-color: rgba(00, 80, 00, 0.75);
-custom-button-color:
linear-gradient(to bottom,
-custom-solid-button-color 0%,
-custom-solid-button-color 64%,
-custom-translucent-button-color 65%);
-fx-background-color: -custom-button-color;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-text-fill: whitesmoke;
-fx-padding: 3.333333em 0.666667em 0.333333em 0.666667em;
-fx-font-size: 30px;
-fx-effect: dropshadow(gaussian, black, 10, 0, 3, 3);
}
.button:hover {
-custom-solid-button-color: derive(lightgreen, 20%);
-fx-effect: dropshadow(gaussian, goldenrod, 10, 0, 3, 3);
}
.button:armed {
-custom-solid-button-color: derive(lightgreen, -10%);
-fx-effect: null;
-fx-background-insets: 2 2 0 0;
}
SuperButton.java
import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class SuperButton extends Application {
private static final String BACKGROUND_IMAGE_LOC =
"http://edugeography.com/images/great-barrier-reef/great-barrier-reef-04.jpg";
#Override
public void start(Stage stage) {
Button button = new Button("I \u2764 Sea Turtles");
ImageView background = new ImageView(
new Image(BACKGROUND_IMAGE_LOC, 400, 0, true, true)
);
StackPane layout = new StackPane(
background,
button
);
StackPane.setAlignment(button, Pos.BOTTOM_CENTER);
StackPane.setMargin(button, new Insets(0, 0, 15, 0));
Scene scene = new Scene(layout);
scene.getStylesheets().add(getClass().getResource(
"super-button.css"
).toExternalForm());
stage.setResizable(false);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Getting the translucent area at the base is slightly tricky, especially because you are applying a drop shadow effect. What happens with a drop shadow effect is that the drop shadow is visible through the translucent area. Normally, when you have an opaque foreground, you can see the shadow through the foreground, but when you have a translucent foreground, the shadow mars the translucent effect a bit. To understand what I mean, review the above images and note the difference between the translucent area in the images with and without a drop shadow involved.
So you might want to rethink the design to not use the drop shadow. There are ways around this using clips, but it gets a bit more complicated and you cannot achieve it using just CSS (you will also need to write some custom skin code in Java, which I won't demonstrate here).
Try
.button {
-fx-opacity: 0.7;
}
I have a tableview in JavaFX and I don't want focused row to differ from others. The problem is that when I click on a row and select it, the row's bottom border goes away. Which css property makes it and how can I fix that?
In the attached screen shot all rows selected, and my last click was on "nature" row.
MCVE:
Main.java:
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
HBox hBox = new HBox();
Scene scene = new Scene(hBox, 300, 275);
scene.getStylesheets().add("main.css");
TableView<Keyword> keywordsTable = new TableView<>();
TableColumn<Keyword, String> wordColumn = new TableColumn<>();
ObservableList<Keyword> data = FXCollections.observableArrayList();
wordColumn.setCellValueFactory(new PropertyValueFactory<>("word"));
keywordsTable.getColumns().add(wordColumn);
keywordsTable.setItems(data);
keywordsTable.setRowFactory(param -> {
TableRow<Keyword> row = new TableRow<>();
row.addEventFilter(MouseEvent.MOUSE_CLICKED, e -> {
keywordsTable.requestFocus();
if (!row.isEmpty() && e.getButton().equals(MouseButton.PRIMARY)) {
changeRowSelection(keywordsTable, row.getItem(), row.getIndex());
}
e.consume();
});
row.addEventFilter(MouseEvent.MOUSE_PRESSED, e -> {
keywordsTable.requestFocus();
e.consume();
});
return row;
});
keywordsTable.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
data.add(new Keyword("one"));
data.add(new Keyword("two"));
data.add(new Keyword("three"));
data.add(new Keyword("four"));
data.add(new Keyword("five"));
hBox.getChildren().add(keywordsTable);
primaryStage.setScene(scene);
primaryStage.show();
}
private void changeRowSelection(TableView table, Keyword keyword, int index) {
if (table.getSelectionModel().getSelectedItems().contains(keyword)) {
table.getSelectionModel().clearSelection(index);
} else {
table.getSelectionModel().select(index);
}
}
public static void main(String[] args) {
launch(args);
}
public class Keyword {
private final SimpleStringProperty word;
public Keyword(String word) {
this.word = new SimpleStringProperty(word);
}
public String getWord() {
return word.get();
}
public void setWord(String word) {
this.word.set(word);
}
}
}
main.css:
.table-row-cell:focused {
-fx-background-insets: 0;
-fx-padding: 0;
}
.list-cell:filled:selected,
.tree-cell:filled:selected,
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected {
-fx-background: #C7E8EA;
-fx-table-cell-border-color: #26ABD7 !important;
-fx-text-fill: black;
}
.table-row-cell:focused {
-fx-background-insets: 0 0 0;
}
.table-cell {
-fx-background-insets: 0 !important;
}
It worked for me with the following css
see for information : https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
.table-view {
-my-bg-color: #C7E8EA;
-my-bd-color: violet;
}
.table-row-cell {
-fx-background: -my-bg-color;
-fx-background-color: -my-bd-color, -fx-background;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0;
-fx-text-fill: black;
}
.table-cell {
-fx-padding: 0.166667em; /* 2px, plus border adds 1px */
-fx-background-color: null;
-fx-border-color: transparent -my-bd-color transparent transparent;
-fx-cell-size: 2.0em; /* 24 */
-fx-text-fill: -fx-text-background-color;
}
Note the custom css variable definition in .table-view. This is not mandatory, just for convenience.
I have a white border around my TextArea that I cannot get rid of
Heres the code:
textArea = new TextArea();
textArea.getStyleClass().add("textArea");
textArea.setWrapText(true);
And the css:
.textArea{
-fx-background-insets: 0 0 0 0, 0, 1, 2;
-fx-background-radius: 0;
-fx-text-fill: white;
-fx-border-color: #2a2a2a;
-fx-border-width: 0;}
.textArea .content{
-fx-background-color: #2a2a2a;
-fx-border-color: #2a2a2a;
}
Can anyone help?
This works in my test case:
.text-area, .text-area .content {
-fx-background-color: #2a2a2a ;
-fx-background-radius: 0 ;
}
.text-area {
-fx-text-fill: white ;
}
Test code:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class TextAreaBorderTest extends Application {
#Override
public void start(Stage primaryStage) {
TextArea textArea = new TextArea();
BorderPane root = new BorderPane(textArea);
root.setPadding(new Insets(24));
Scene scene = new Scene(root);
scene.getStylesheets().add("text-area-border-test.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I added
.root {
-fx-background-color: black ;
}
to the CSS in order to test.