I am using Java FXML.
The progress bars look like this:
JavaFX Progress Bar
How do I remove the grey border around, but maintain the background.
To look like this:
Desired Progress Bar
Thanks!
You need to add a stylesheet and do this:
.progress-bar > .bar, .progress-bar > .track {
-fx-background-insets: 0;
}
You can do your own research from CSS Reference and Modena Theme CSS if you have similar problems in the future.
For my case, flat progress bar working with following style sheet
.progress-bar > .bar {
-fx-padding:0;
-fx-background-radius:0;
-fx-background-insets: 0;
-fx-background-color: black;
}
.progress-bar > .track {
-fx-background-color: lightgray, white;
-fx-background-radius:0;
-fx-background-insets: 0, 1;
}
Related
I am building an application using JavaFX and I have a form with JFXTextFields and JFXComboBoxes. I need to round them like round corners as the following picture.
Like this:
I have tried the following CSS code:
.jfx-text-field {
-fx-border-radius: 20px;
-fx-background-radius: 20 20 20 20;
-fx-border-color: #609;
}
But the result is this:
So how to round the text fields and combo boxes using CSS in JavaFX?
The .css-files used by JFoenix can be found at JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls. The .css-file belonging to JFXTextField is jfx-text-field.css and the .css-file belonging to JFXComboBox is jfx-combo-box.css.
The styles defined in these files have to be adapted in a user-defined .css-file according to the requirements, e.g.:
.jfx-text-field,
.jfx-combo-box {
-fx-border-radius: 20px;
-fx-border-color: #CCCCCC;
}
.jfx-text-field {
-fx-padding: 0.333333em 1em 0.333333em 1em;
}
.jfx-combo-box {
-fx-padding: 0em 1em 0em 1em;
}
.jfx-text-field > .input-line,
.jfx-combo-box > .input-line {
-fx-background-color: transparent;
-fx-pref-height: 0px;
-fx-translate-y: 0px;
}
.jfx-text-field > .input-focused-line,
.jfx-combo-box > .input-focused-line {
-fx-background-color: transparent;
-fx-pref-height: 0px;
}
In the first block the border-radius and border-color are defined and in the following two blocks the padding. In the last two blocks the input line is disabled, which is still visible in the originally posted screenshot above. The result is:
The posted style is only an example and has to be adapted / optimized according to your requirements.
I work with the JFoenix-Library and have a problem.
How can I change the width of the tab-selected-line. I tried the following code but it doesnt work:
.jfx-tab-pane .tab-selected-line {
-fx-border-color: green;
-fx-stroke-width: 3px;
}
I can set the color of the selected line but the width wont work. So i tested it on another way.
I set the border-width and the border-color of the tab like this:
.jfx-tab-pane .tab:selected {
-fx-border-width: 0 0 4 0;
-fx-border-color: green;
}
But after that, I cant set the selected-line color. It takes the default color.
enter image description here
This works for me.
.jfx-tab-pane .tab-selected-line {
-fx-background-color: white;
}
For change stroke color must use -fx-stroke
You can use this:
.jfx-tab-pane .tab-selected-line {
-fx-stroke: green;
-fx-stroke-width: 5pt;
}
I am trying to do some css styling in a stylesheet for a JavaFX scene.
It is going to be loaded upon opening the scene, and targets all the "basic" elements of a scene.
My problem is that i can't seem to find the right combination of code, to change the background color, of the button in a standard JavaFX checkbox.
This is where i am now:
.check-box:selected{
-fx-background-color: #00FF00;
}
I have tried some variants of the above, like
.check-box .button{
-fx-fill: #00FF00;
-fx-background-color: #00FF00;
}
and others, but without success.
So in general, how do i access a button in a checkbox?
Thank you in advance :-)
The parts of the CheckBox to apply the -fx-background-color to are .box and .box > .mark in case you want to change the mark color:
.check-box:selected > .box {
/* background color for selected checkbox */
-fx-background-color: lime;
}
.check-box > .box {
/* background color of unselected checkbox */
-fx-background-color: red;
}
.check-box:selected > .box > .mark,
.check-box:indeterminate > .box > .mark {
/* modify mark color */
-fx-background-color: blue;
}
I am trying to hide the ComboBox arrow using the method in here, but for some reason I get this:
Try this:
.combo-box, .arrow, .arrow-button{
-fx-background-color: transparent;
}
to get rid of all other colours appearing (focused: border-color/border-glow and unfocused: shadow) add .text-field
.combo-box, .arrow, .arrow-button, .text-field{
-fx-background-color: transparent;
}
be aware that every text-field/arrow/arrow-button will be affected. To get around this, you need to add your css-style-sheet to the node itself
your-combo-box-node.getStylesheets().add(Main.class.getResource("styles.css").toExternalForm());
If you need more flexibility with the styling of the individual parts of the node itself, split up the css-code-line
.combo-box{ -fx- ... }
.arrow{ -fx- ... }
.arrow-button{ -fx- ... }
.text-field{ -fx- ... }
This is really old post but just an update if anybody need it. If you want to style just one combo box you can do it in two other ways. First to define id of the combo in Css
#idOfTheComboBox> .arrow-button > .arrow {
-fx-background-color: transparent;
}
#idOfTheComboBox> .arrow-button {
-fx-background-color: transparent;
}
or with class
.your-class > .arrow-button > .arrow {
-fx-background-color: transparent;
}
.your-class > .arrow-button {
-fx-background-color: transparent;
}
I need your advices. (Sorry for my eng. I hope than you'll understand me)
1) I want to create custom TabWidget and use QSS. Now it's look like this:
I want fill background under tabs (I accept property called autoFillBackground). It's need look like this:
2) When I start drag and drop tab this tab is filled with white color. And when I drop the tab this tab set custom qss.
I want to change the style when I drag and drop the tab.
Thx
(I was reading qss manual)
some code
QTabWidget::tab-bar {
background-color: black;
}
QTabBar::tab {
background-color: #4094da;
border-color:white;
font: bold 12px 'Arial';
color: white;
height:60px;
}
QTabBar::tab:!selected {
background-color: #9E9E9E;
color: white;
}
QTabBar::close-button {
background-position: center;
background-image: url(":/Appearance/close_chat_item");
}
QTabWidget::pane {
position: absolute;
}
QTabBar::tab:selected {
border-color:#4094da;
background-color: #4094da;
color: white;
}
The QTabWidget does not paint the background, you need to set the background of the parent widget of the QTabWidget.
As I understand, you willing the background color to change in any drag & drop situation(or it is my assumption). If it's like I understand, you should define hover option on your qss. For more info on Qt documentation.
Example code:
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
Your priority should be forcing to cost on qss, logic structure consider to second plan or you can use for some kind of workaround.