I want to change width for increase and decrease arrow buttons in JavaFX 11 (not change the layout).
I've tried the following CSS, but that doesn't work
.spinner .increment-arrow-button {
-fx-pref-width: 50px;
}
This one works, however it stretches the arrow itself. I'd like to resize the button, not the glyph.
.spinner .decrement-arrow-button .decrement-arrow {
-fx-pref-width: 50px;
}
Setting min/max width doesn't change a thing either.
Try playing around with the -fx-padding for the following style classes
The following reduces the width of buttons and arrows
.spinner .increment-arrow-button {
-fx-padding: 1 2 1 2; /*caspian.css values are 4 8 4 8 */
}
.spinner .decrement-arrow-button {
-fx-padding: 1 2 1 2; /*caspian.css values are 3 8 6 8 */
}
.spinner .increment-arrow-button .increment-arrow {
-fx-padding: 2 3 2 3; /*caspian.css values are 2 4 2 4 */
}
.spinner .decrement-arrow-button .decrement-arrow {
-fx-padding: 2 3 2 3; /*caspian.css values are 2 4 2 4 */
}
You might have to increase the padding on left and right to make buttons wider.
Related
I want to create button in JavaFX having the following style:
I tried to use linear-gradient, but not able to add horizontal and vertical gradient at the same time.
Will you please help to create CSS for the above button style?
As per the comments I am including the css, that I have done so far :
.button-sales {
-fx-border-width: 4px;
-fx-border-color: white rgb(7,2,226) rgb(7,2,226) white;
-fx-background-radius: 0,0,0,0;
-fx-background-color: rgb(0,0,254);
-fx-font-weight: bold;
-fx-font-size: 1.1em;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, rgb(7,2,226) 0%, rgb(7,2,226) 100%),
white,
rgb(0,0,254);
}
but above css not exactly match with the button I required. Please help.
I am trying to change the style of the javafx spinner using a css stylesheet.
However, when changing the colour I can only change the colour of the text field and the arrow buttons to the side of spinner still look like the default.
How can I change the colour of these buttons too?
Set the -fx-body-color that is used as background for the buttons:
.spinner .increment-arrow-button,
.spinner .decrement-arrow-button {
-fx-body-color: yellow;
}
.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
/* interpolate color between yellow and red based on first color brightness */
-fx-body-color: ladder(#444, yellow 0%, red 100%);
}
.spinner .increment-arrow-button:hover:pressed,
.spinner .decrement-arrow-button:hover:pressed,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
/* interpolate color between yellow and red based on first color brightness */
-fx-body-color: ladder(#AAA, yellow 0%, red 100%);
}
Those are used by the default stylesheet as the button's background color.
I know the OP figured it out but I'm putting this here in case someone else needs an answer.
You can edit spinner buttons with these selectors:
.spinner .increment-arrow-button {}
.spinner .decrement-arrow-button {}
.spinner .increment-arrow-button:hover {}
.spinner .decrement-arrow-button:hover {}
.spinner .increment-arrow-button:pressed {}
.spinner .decrement-arrow-button:pressed {}
If you'd like to edit the arrows inside the buttons themselves, use these selectors:
.spinner .increment-arrow-button .increment-arrow {
/* The default Modena styling */
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}
.spinner .decrement-arrow-button .decrement-arrow {
/* The default Modena styling */
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
Here is another helpful tip for something people may also run into: changing the color in the area behind the buttons.
Setting these selectors to have a transparent background will remove the highlighted areas behind the buttons within the spinner.
You can achieve that with something like this:
/* In general */
.spinner {
-fx-background-color: transparent;
}
/* On user interaction */
.spinner:focused,
.spinner:contains-focus {
-fx-background-color: transparent;
}
Just a few things I picked up while creating my own dark theme stylesheet that I use for school projects.
I'm trying to get an iTunes like progress bar that is very small (height of about 5px) but I can't seem to go any lower than 19 or 20px.
I tried setting -fx-max-height with no avail, also on the surrounding pane. Note that this value does indeed change the height - I just can't get it less than about 20px.
Any ideas how to achieve that? I'd like to avoid using a plain rectangle for indicating progress because of loss of semantic and support of assistive technology.
Thanks.
The ProgressBar default styling is the reason why you can't reduce its height.
As we can see in the modena.css file for the progress-bar CSS selector:
.progress-bar > .bar {
-fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
-fx-background-insets: 3 3 4 3;
/*-fx-background-radius: 0.583em; *//* 7 */
-fx-background-radius: 2;
-fx-padding: 0.75em;
}
two CSS properties are responsible for this: -fx-padding for the height of the blue inner bar and -fx-background-insets for the height of the surrounding gray bar.
So you can customize this selector as you need. For instance, with these properties you will have 5 pixels height:
.progress-bar > .bar {
-fx-background-insets: 1 1 2 1;
-fx-padding: 0.20em;
}
No need for height settings on your code:
#Override
public void start(Stage primaryStage) {
ProgressBar pb = new ProgressBar(0.4);
pb.setPrefWidth(200);
StackPane root = new StackPane(pb);
Scene scene = new Scene(root, 300, 200);
scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
I'm attempting to style the borders of my context menus in JavaFX with CSS.
The Problem
I want a 1 pixel, solid black line as the border of the context menu. Instead, I'm getting a 2 pixel, solid black line as the border of the context menu.
Here are two images showing the pixel border.
100%
1000%
Clearly, there are 2 pixels being rendered instead of 1 pixel for the border.
CSS
I'm setting the border with the following CSS:
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color: red;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-effect: null;
-fx-border-width: 1; /* I also tried 1px here */
-fx-border-color: black;
-fx-border-style: solid outside line-cap square;
-fx-padding: 0;
}
I also set the child nodes to transparent borders and backgrounds just to rule out that they were responsible:
.context-menu .menu-item,
.context-menu .menu-item .label {
-fx-background-color: transparent;
-fx-border-color: transparent;
}
Question(s)
Why am I getting a 2 pixel border, instead of a 1 pixel border?
How can I get a 1 pixel border, instead of this 2 pixel border?
There are a couple of answers already on StackOverflow that explain why the strokes can't seem to render a 1px border all of the time:
JavaFX graphics “blurred” or anti-aliased? (No effects used)
What are a line's exact dimensions in JavaFX 2?
The best workaround I've found for this issue is to not use borders at all. Instead, I use multiple backgrounds and -fx-background-insets to simulate a border:
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color: black, red;
-fx-background-insets: 0, 1;
}
That's all it takes for a clean, 1 pixel, hard border
I'm attempting to perform a CSS animation, where a number of images are cycled through. I appreciate that normally one would use a sprite (and doing so works with this code), however as I wish to use this animation in iBooks, I have to keep to a 2 million pixel limit on each image, so instead I'm using separate images. So I'm attempting to use the following CSS, but to no success:
#sprite {
width: 200px;
height: 170px;
background:url('../Images/monkey1small.png') 0 0;
-webkit-animation-duration:4000ms;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:animate01;
-webkit-animation-direction:forward;
-moz-animation-duration:1ms;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:step-start;
-moz-animation-name:animate01;
}
#-webkit-keyframes animate01 {
0% { background:url('../Images/monkey1small.png') 0 0; }
20% { background:url('../Images/monkey2small.png') 0 0; }
40% { background:url('../Images/monkey3small.png') 0 0; }
60% { background:url('../Images/monkey4small.png') 0 0; }
80% { background:url('../Images/monkey5small.png') 0 0; }
100% { background:url('../Images/monkey1small.png') 0 0; }
}
#-moz-keyframes animate01 {
0% { background:url('../Images/monkey1small.png') 0 0; }
20% { background:url('../Images/monkey2small.png') 0 0; }
40% { background:url('../Images/monkey3small.png') 0 0; }
60% { background:url('../Images/monkey4small.png') 0 0; }
80% { background:url('../Images/monkey5small.png') 0 0; }
100% { background:url('../Images/monkey1small.png') 0 0; }
}
It is called with a simple div:
At the moment it just statically displays the first image. I can add other css properties to the frames and it will animate those properties, however trying to change the background url as shown in the code above, does not work. Any suggestions?
What you posted works fine in Chrome and Safari (http://jsfiddle.net/4rAer/) but doesn't do a thing in Firefox. Where it dies in Firefox is the inclusion of a background image. You can animate background in Firefox - but only background colour. But if this is just for iBooks that shouldn't matter. I'm assuming the animation doesn't work in iBooks either.
This fiddle has a filmstrip that should have better support. It does require some additional HTML but I animating the Top property has broad support. http://jsfiddle.net/4rAer/1/
see here:
http://chrismar.sh/2011/07/19/animating-sprites-using-css/
Do not animate the background-image property, do the background-position one!