I have a label in JavaFX application that i need to apply a double underline too. I know this aint possible to do with a basic property, but instead i have applied the following css to the label, which gives it a "effect" of a double underline
.double-underline {
-fx-border-color: #FFFFFF;
-fx-border-width: 0 0 1 0;
-fx-underline: true;
}
Now this does give me the effect i want, but i need to if possible, increase the spacing between the text and the actual underline. How can i do this?
This would be easier if there was a "double" border style that i could apply, but there isnt that i know of
Here is what it looks like now
and i would like it too look more like this
Thanks in advance
You can adjust the position of the border with CSS:
.double-underline {
-fx-border-color: black;
-fx-border-width: 0 0 1 0;
-fx-underline: true;
-fx-padding: 0 0 -1 0;
}
EDIT: As Uluk Biy says, the above snippet will join the border to the actual underline. So this will do what you want:
.double-underline {
-fx-border-color: black, transparent, black;
-fx-border-width: 0 0 1 0, 0 0 1 0, 0 0 1 0;
-fx-border-insets: 0 0 1 0, 0 0 2 0, 0 0 3 0;
}
Instead of using an underlined label, configure a double border, and just play with the insets.
Related
So recently i have been working on a project and I need textfields to get the username and the password of the user.
I have tried using *-fx-background-insets: 0 0 0 0, 0, 0, 0;
to hide the border but the border on top still persists.
Here is the code:
-fx-background: whitesmoke; -fx-background-insets: 0 0 0 0, 0, 0, 0; -fx-background-radius: 0 ;
And here is the result. As you can see the border on top still persists:
Here is a style I got from https://dx.dragan.ba/javafx-textfield-custom-css/. It gets rid of all the borders except the bottom border.
CSS
* {
-fx-primary-color: #007acc;
-fx-secondary-color: #4B6EAF;
-fx-grey-color: #b9b9b9;
-fx-focus-color: -fx-secondary-color;
}
.root{
-fx-background-color: -fx-primary-color, white;
}
.text-field {
-fx-accent: -fx-primary-color;
-fx-background-color: -fx-grey-color, white;
-fx-background-insets: 0, 0 0 1 0;
-fx-background-radius: 0;
}
.text-field:focused {
-fx-background-color: -fx-primary-color, white;
}
Output
Overall, css seems to be working for everything but the buttons. I originally had this all in FXML but was told to switch it to straight JavaFX. Trying to get my buttons to follow their css again.
Is there a way to set button IDs in FX?
Any help would be appreciated, I've done a lot of looking through the documentation and some tutorials, but haven't been able to figure it out.
Here is my button code:
public class MainViewController extends Application {
private Button getStarted, getLoad, getHelp, returnToStart;
private TextArea tips;
private Pane mainPane, storyPane, helpPane;
public MainViewController() {
getStarted = new Button("S T A R T");
getLoad = new Button("L O A D");
getHelp = new Button("H E L P");
returnToStart = new Button("R T R N");
tips = new TextArea();
mainPane = new Pane();
storyPane = new Pane();
helpPane = new Pane();
//Main Pane Layouts
getStarted.setLayoutX(370);
getStarted.setLayoutY(164);
getStarted.setPrefHeight(35);
getStarted.setPrefWidth(110);
getStarted.getStyleClass().add("resources/css/MainView.css");
getLoad.setLayoutX(370);
getLoad.setLayoutY(215);
getLoad.setPrefHeight(35);
getLoad.setPrefWidth(110);
getLoad.getStyleClass().add("resources/css/MainView.css");
getHelp.setLayoutX(370);
getHelp.setLayoutY(266);
getHelp.setPrefHeight(35);
getHelp.setPrefWidth(110);
getHelp.getStyleClass().add("resources/css/MainView.css");
mainPane.getChildren().addAll(getStarted, getLoad, getHelp);
//Help Pane Layouts
returnToStart.setLayoutX(356);
returnToStart.setLayoutY(266);
returnToStart.setPrefHeight(35);
returnToStart.setPrefWidth(110);
}
#Override
public void start(Stage stage) throws Exception {
Scene mainView = new Scene(mainPane, 488, 322);
stage.setScene(mainView);
mainView.getStylesheets().add("resources/css/MainView.css");
stage.setTitle("Return to Monke");
stage.setResizable(false);
stage.getIcons().add(new Image("resources/images/monke_icon.png"));
stage.show();
Media opening = new Media(new File("src/resources/files/Opening.mp3").toURI().toString());
MediaPlayer openPlay = new MediaPlayer(opening);
openPlay.play();
openPlay.setCycleCount(MediaPlayer.INDEFINITE);
openPlay.setAutoPlay(true);
Media story = new Media(new File("src/resources/files/insert.mp3").toURI().toString());
MediaPlayer storyPlay = new MediaPlayer(story);
}
public static void main(String[] args) {
launch(args);
}
}
Here is my css:
.root {
-fx-background-image: url("../images/rtm.gif");
-fx-background-size: 100% 100%;
-fx-fill-width: 50%;
-fx-fill-heigt: 50%;
}
#Button {
-fx-font-family: "Roboto";
-fx-text-fill: black;
-fx-padding: 8 15 15 15;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 10;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #9922a3 0%, #903482 100%),
#9d0096,
#c609d8,
radial-gradient(center 50% 50%, radius 100%, #a31e9d, #cb21a8);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 1.1em;
-fx-opacity: 0.6;
}
#Button:hover {
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #903482 0%, #9922a3 100%),
#9d0096,
#c609d8,
radial-gradient(center 50% 50%, radius 100%, #d538bb, #c52da5);
}
#Button:pressed {
-fx-padding: 10 15 13 15;
-fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
#Button Text {
-fx-fill: white;
-fx-effect: dropshadow(gaussian, #a30000, 0, 0, 0, 2);
}
#Load {
-fx-font-family: "Roboto";
-fx-text-fill: black;
-fx-padding: 8 15 15 15;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 10;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #0AFA18 0%, #00CD0C 100%),
#019B0A,
#7AFF81,
radial-gradient(center 50% 50%, radius 100%, #0AFA18, #00CD0C);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 1.1em;
-fx-opacity: 0.6;
}
#Load:hover {
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #9FFF84 0%, #81D26A 100%),
#60A54C,
#60A54C,
radial-gradient(center 50% 50%, radius 100%, #9FFF84, #60A54C);
}
#Load:pressed {
-fx-padding: 10 15 13 15;
-fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
#Load Text {
-fx-fill: white;
-fx-effect: dropshadow(gaussian, #a30000, 0, 0, 0, 2);
}
#Help {
-fx-font-family: "Roboto";
-fx-text-fill: black;
-fx-padding: 8 15 15 15;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 10;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #0086FC 0%, #0073D7 100%),
#0060B4,
#0060B4,
radial-gradient(center 50% 50%, radius 100%, #0086FC, #0060B4);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 1.1em;
-fx-opacity: 0.6;
}
#Help:hover {
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #72BDFF 0%, #60A0D8 100%),
#4F86B6,
#4F86B6,
radial-gradient(center 50% 50%, radius 100%, #72BDFF, #4F86B6);
}
#Help:pressed {
-fx-padding: 10 15 13 15;
-fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
#Help Text {
-fx-fill: white;
-fx-effect: dropshadow(gaussian, #a30000, 0, 0, 0, 2);
}```
Figured it out.
It's getStyleClass("name of CSS button")
I'm creating rulers using javafx by modifying css of javafx slider and I created something like this:
And I was trying to make this:
So I tried to rotate sliders by calling setRotate() method but it becomes like this:
Here is my code for sliders:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.setRotate(180);
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.setRotate(180);
And here is my css code for sliders:
.slider > .thumb,
.slider > .thumb:hover,
.slider:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 2 0 -23 0;
-fx-padding: 1 1 0 1;
-fx-background-radius: 0;
}
.slider:vertical > .thumb,
.slider:vertical > .thumb:hover,
.slider:vertical:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 0 -23 0 2;
-fx-padding: 1 0 1 1;
-fx-background-radius: 0;
}
.slider > .track,
.slider:vertical > .track {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0;
}
.slider > .axis {
-fx-tick-mark-stroke: transparent;
-fx-tick-label-font-size: 0.833333em;
-fx-tick-label-fill: #9a9a9a;
-fx-background-color: #333;
}
Please suggest me how can I flip axis or rotate labels of these slider so that I can achieve expected results.
Basically, you have to set the side property of the axis (for left and top). The steps that are involved:
let the slider have a custom style, f.i. axis-top/axis-left
in css, define a rule for the axis contained in such a slider to set its side to top/left
The code:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.getStyleClass().add("axis-top");
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.getStyleClass().add("axis-left");
In css:
.slider.axis-top > .axis {
-fx-side: TOP;
}
.slider.axis-left > .axis {
-fx-side: LEFT;
}
This can certainly be optimized, but should get you started.
I can't understand what element I should work to do this task. I tried
.tab-header-area .tab{
-fx-background-color:red;
-fx-padding:30px;
}
EDIT 1
This is what I get
But I have the same tab header inside big red rectangle. How can I increase distance between text and edge of the tab header area? By other words - how can I make tab header bigger with the same font size?
EDIT 2
When I do
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}
I get:
But I need (sorry, it's gimp,not photoshop)
If you want a border around the tab (not the label), you have to use this:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-background-color: red;
-fx-padding: 20px;
-fx-border-color: black;
-fx-border-width: 1px;
}
If you want to manipulate the tab-container (where the label is in) itself you need this:
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container{
-fx-border-color: black;
-fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
UPDATE
Default for a selected tab is that:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 1, 1;
-fx-border-color: -fx-focus-color, -fx-faint-focus-color;
-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
-fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
And this it how it goes:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
-fx-padding: 20px;
-fx-background-color: red;
-fx-border-width: 1px;
-fx-border-color: black;
}
.tab-pane > .tab-header-area > .headers-region >.tab:selected .focus-indicator{
-fx-border-width: 0px;
}
Look at the modena.css (default JavaFX stylesheet) file for info on things to change.
Font size will not change dynamic, you have to take care of font size with a listener on size/width/height property of the tab (in relation to font size).
And there are a lot of pseudo tags like .tab:selected .tab:top etc. So be aware of this kind of things if you want the default behavior only with new design.
And finally have a look at css selectors, you missed the descending selectors ('>'): http://www.w3schools.com/cssref/sel_element_gt.asp
It's not really clear what you are looking for... maybe
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
public class TabPaneStyleTest extends Application {
#Override
public void start(Stage primaryStage) {
TabPane tabPane = new TabPane();
Tab tab1 = new Tab();
tab1.setGraphic(new Label("tab 1"));
Tab tab2 = new Tab();
tab2.setGraphic(new Label("tab 2"));
tabPane.getTabs().addAll(tab1, tab2);
Scene scene = new Scene(tabPane);
scene.getStylesheets().add("tab-pane-big-tabs.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
with the css file
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}
I've googled and searched in SO but unfortunately, I didn't find the way how to make a Non-Editable combobox contain a textfield with white background via css.
In other words, how do I make a Non-Editable combobox appear like an Editable combobox (i.e. the same focus, arrow button, etc)?
The code:
.combo-box .text-field{
-fx-background-color: white;
}
doesn't work.
Can anyone help?
You can just add this css:
.combo-box > .list-cell{
-fx-background-color: -fx-outer-border, white;
-fx-background-insets: 1 -3 1 1, 1 -2 1 1 ;
}
But to get all the styles from edditable combobox you have to find .combo-box-base:editable from /jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.css and replace .text-field with .list-cell, because only editable combobox has .text-field
.combo-box > .arrow-button {
-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;
}
.combo-box > .arrow-button{
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 1 1 1 0, 1, 2;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}
.combo-box > .list-cell {
-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: 1 0 1 1;
-fx-background-radius: 2 0 0 2;
}
.combo-box:contains-focus {
-fx-background-color: -fx-focus-color;
-fx-background-insets: -0.2;
-fx-background-radius: 3;
}
.combo-box:focused > .list-cell{
-fx-background-color:
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
-fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
}
.combo-box :contains-focus > .arrow-button{
-fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: 1, 2, 1, 2.6;
-fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
}
And here is the result:
1-st box styled with just 2 lines
2-nd has testComboBox2.setEditable(true);
3-d styled with big css from default styles.
I'm not sure if this is what you want because I can't imagine well "not editable combobox with a textfield" but maybe a comma between them?
.combo-box, .text-field{
-fx-background-color: white;
}
This is my output:
Is this what you are looking for?
I needed this for a project. I hope you haven't been smashing your head against it as long as I did...
.combo-box:disabled, .combo-box:disabled > .text-field {
-fx-opacity: 1.0;
}
Then, if your ComboBox is disabled, it will look normal, but you can not engage the drop down or type into the editable text field.