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.
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
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.
I want to make a custom checkbox, but my mark is limited by box size. Is there a way to extend it outside bounds?
CSS code for checkbox:
.check-box{
-fx-font-family: "Segoe UI Light";
-fx-font-size: 18;
-fx-text-fill:#01449f;}
.check-box .box{
-fx-outer-border: #cadbec;
-fx-body-color: white;
-fx-background-color:
-fx-outer-border,
-fx-body-color;
-fx-background-insets: 0, 1;
-fx-background-radius: 2px, 0px;}
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";}
.check-box:selected .mark {
-fx-background-color: #0181e2;}
You can scale the graphic:
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";
-fx-scale-x: 2;
-fx-scale-y: 2;
}
EDIT
To move the tick, you can translate it:
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";
-fx-scale-x: 2;
-fx-scale-y: 2;
-fx-translate-x: 5px;
-fx-translate-y: -3px;
}
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.