enter image description here
I am new to CSS and I am trying to get rid of the white space (as seen in the image) in the drop menu of the combo box... setting the background black didn't work... this is my CSS for the combo box
.combo-box {
-fx-border-width : 1 ;
-fx-border-color : #29a8a6;
-fx-text-fill: #29a8a6;
-fx-border-radius: 50;
-fx-padding : 0;
-fx-background-color: #29a8a6;
-fx-background-radius: 50;
}
.combo-box .list-cell{
-fx-prompt-text-fill : #29a8a6;
-fx-text-fill: #29a8a6;
-fx-background-color: black;
-fx-padding : 2;
-fx-cell-border : 0;
-fx-border-width: 0;
-fx-border-radius: 50;
-fx-background-radius: 50;
}
To get rid of the white space in the drop down menu you can add this to your css file:
.combo-box .list-view {
-fx-background-color: black;
}
PS:
Whenever you are not sure which elements styling you need to change, you can make use of Scenic View to find out the element.
apparently the problem was the listview in the combo-box , so setting the insets to 0 solved my problem
.combo-box {
-fx-background-color:#29a8a6;
-fx-background-radius : 40;
}
.combo-box .list-view {
-fx-prompt-text-fill : #29a8a6;
-fx-background-color : black;
-fx-background-radius : 40;
-fx-insets : 0;
}
.combo-box .list-cell{
-fx-prompt-text-fill : #29a8a6;
-fx-text-alignment : CENTER;
-fx-background-radius : 40;
-fx-background-color : black;
}
Related
I want to customize the buttons, button container, backgroud color, the AlertType icon as well in an Alert Dialog.
Tried following these two solutions :
Styling default JavaFX Dialogs
Customize JavaFx Alert with css
I suppose the code from CSS that I have mentioned should be applicable to all the Alert dialog-pane ?
Not sure what am I missing here.
private static void createSimpleInformationDialog(String message){
Alert alert = createSimpleInformationAlert(message, AlertType.INFORMATION);
alert.getDialogPane().setHeaderText(StringTools.isNull(null, ""));
alert.getDialogPane().setMaxWidth(200);
alert.getDialogPane().setMinWidth(150);
alert.getDialogPane().setPadding(new Insets(0, 10, 0, 10));
alert.showAndWait();
}
private static Alert createSimpleInformationAlert(String message, AlertType type) {
Alert alert = new Alert(type);
alert.setTitle(Lang.get(Defs.FX_DIALOGS_EXCEPTIONS_GENERIC_TITLE));
alert.setContentText(message);
alert.initModality(Modality.APPLICATION_MODAL);
alert.initOwner(FXMain.getInstance().getStage());
return alert;
}
CSS file :
.dialog-pane{
-fx-border-color:black;
-fx-border-width:2.0px;
}
/**Costumization of The Bar where the buttons are located**/
.dialog-pane > .button-bar > .container {
-fx-background-color:black;
}
.dialog-pane > .content.label {
-fx-padding: 0.5em 0.5em 0.5em 0.5em;
-fx-background-color: yellow;
-fx-text-fill:black;
-fx-font-size:15.0px;
}
/**Costumization of DialogPane Header**/
.dialog-pane:header .header-panel {
-fx-background-color: black;
}
.dialog-pane:header .header-panel .label{
-fx-background-color: yellow;
-fx-background-radius:10px;
-fx-text-fill:black;
-fx-font-size:15.0px;
}
/**Costumization of Buttons**/
.dialog-pane .button{
-fx-background-color:black;
-fx-text-fill:white;
-fx-wrap-text: true;
-fx-effect: dropshadow( three-pass-box, yellow, 10.0, 0.0, 0.0, 0.0);
-fx-cursor:hand;
}
.dialog-pane .button:hover{
-fx-background-color:white;
-fx-text-fill:black;
-fx-font-weight:bold;
}
I am currently facing a problem with javafx table. I have a tableview that shows a list of subjects. The background color of each row depends if a subject is able to be enrolled or not. Subjects with green background can be enrolled and subjects with pink background cannot be enrolled. The problem occurs when scrolling the table.
TableView before scrolling
TableView after scrolling down and up
After scrolling, the background color of rows have changed and the subjects with green background might become pink and vice versa. This works perfectly without adding a css to the table.
Code I used to set the background color of rows
tblAvailableSubjects.setRowFactory((TableView<Subject> param) -> {
TableRow<Subject> row = new TableRow<>();
row.emptyProperty().addListener((obs, wasEmpty, isEmpty) -> {
if(isEmpty) {
row.setContextMenu(null);
row.setStyle("-fx-border-color: transparent");
} else {
Subject subject = row.getItem();
if(subject.getSubjectEvaluation().equals(SubjectEvaluation.COMPLETED)) {
row.setStyle("-fx-background: #B2EBF2");
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.FAILED)) {
row.setStyle("-fx-background: #FF0000");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.OKAY)) {
row.setStyle("-fx-background: #8BC34A");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.ENROLLWITHCOREQ)) {
row.setStyle("-fx-background: #FFEB3B");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.CANTENROLL)) {
row.setStyle("-fx-background: #FFCDD2");
}
}
});
return row;
});
CSS for table
.table-view {
/* Constants used throughout the tableview. */
-fx-table-header-border-color: transparent;
-fx-table-cell-border-color: -fx-box-border;
/* Horizontal Lines*/
-fx-background-color: transparent;
}
.table-view .filler, .table-view .column-header
{
-fx-size: 40;
-fx-border-style: null;
-fx-border-color: rgb(200.0, 200.0, 200.0);
-fx-border-width: 0 0 1 0;
-fx-background-color: transparent;
}
.table-view .show-hide-columns-button
{
-fx-background-color: transparent;
}
.table-view .column-header .label,
.table-view .column-drag-header .label
{
-fx-alignment: CENTER_LEFT;
}
.table-view .column-header-background
{
-fx-background-color: transparent;
}
.table-row-cell {
-fx-cell-size: 30px;
}
.table-cell {
-fx-border-color: transparent;
-fx-border-width: 1;
}
EDIT: The subject's SubjectEvaluation value doesn't change, it seems that it switches the context menu and background color between rows when scrolling.
I hope someone could help me with this. Thanks.
I customized porgressbar using css but when i used -fx-pref-width for .bar it did not work.This is my css :
.super-fx-progress-bar {
-fx-background-color: transparent;
}
.super-fx-progress-bar .track{
-fx-background-color: transparent;
-fx-border-radius:20;
-fx-background-radius:20;
}
.super-fx-progress-bar .bar {
-fx-background-color: #0057e7,transparent,#6666ff;
-fx-background-insets: 1 1 1 3, 1 1 1 1, 1 1 2 3;
-fx-border-radius:20;
-fx-background-radius:20;
-fx-pref-width:2
/*What should i add to minimize width of bar when its value is indeterminated*/
}
You can do this by adding :
-fx-indeterminate-bar-length:value;
in progressbar class (you used .super-fx-progress-bar) :
I did this to show the differents results :
First style :
.super-fx-progress-bar {
-fx-background-color: transparent;
-fx-indeterminate-bar-animation-time:1.0;
-fx-indeterminate-bar-flip:true;
-fx-indeterminate-bar-escape:true;
-fx-indeterminate-bar-length:20;
-fx-min-height:5;
}
Second style :
.super-fx-progress-bar {
-fx-background-color: transparent;
-fx-indeterminate-bar-animation-time:1.0;
-fx-indeterminate-bar-flip:true;
-fx-indeterminate-bar-escape:true;
-fx-indeterminate-bar-length:60;
-fx-min-height:5;
}
I am using the following css to customize my scrollbars
/* The main scrollbar **track** CSS class */
.workspace-grid .scroll-bar:horizontal .track,
.workspace-grid .scroll-bar:vertical .track{
-fx-background-color:transparent;
-fx-border-color:transparent;
-fx-background-radius: 0em;
-fx-border-radius:2em;
}
/* The increment and decrement button CSS class of scrollbar */
.workspace-grid .scroll-bar:horizontal .increment-button ,
.workspace-grid .scroll-bar:horizontal .decrement-button {
-fx-background-color:transparent;
-fx-background-radius: 0em;
-fx-padding:0 0 10 0;
}
/* The increment and decrement button CSS class of scrollbar */
.workspace-grid .scroll-bar:vertical .increment-button ,
.workspace-grid .scroll-bar:vertical .decrement-button {
-fx-background-color:transparent;
-fx-background-radius: 0em;
-fx-padding:0 10 0 0;
}
.workspace-grid .scroll-bar .increment-arrow,
.workspace-grid .scroll-bar .decrement-arrow
{
-fx-shape: " ";
-fx-padding:0;
}
/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.workspace-grid .scroll-bar:horizontal .thumb,
.workspace-grid .scroll-bar:vertical .thumb {
-fx-background-color:derive(black,90%);
-fx-background-insets: 2, 0, 0;
-fx-background-radius: 2em;
}
But my scrollbars looks like following
How to make the scrollbars looks like following
EDITED
I am guessing you are reading this article from which you took the CSS properties (If not then have a look). From what I can see the article is fine and explains everything. They have only one minor mistake on their CSS but apart from that if you follow their instructions you will be able to achieve what you want.
Here is a mini example :
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class ScrollBarCSS extends Application {
#Override
public void start(Stage stage) throws Exception {
ScrollPane pane = new ScrollPane();
pane.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
Pane emptyPane = new Pane();
emptyPane.setPrefSize(600, 600);
pane.setContent(emptyPane);
stage.setScene(new Scene(pane, 200, 200));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
And the CSS (UPDATE):
.scroll-bar:horizontal .track,
.scroll-bar:vertical .track{
-fx-background-color :transparent;
-fx-border-color :transparent;
-fx-background-radius : 0.0em;
-fx-border-radius :2.0em;
}
.scroll-bar:horizontal .increment-button ,
.scroll-bar:horizontal .decrement-button {
-fx-background-color :transparent;
-fx-background-radius : 0.0em;
-fx-padding :0.0 0.0 10.0 0.0;
}
.scroll-bar:vertical .increment-button ,
.scroll-bar:vertical .decrement-button {
-fx-background-color :transparent;
-fx-background-radius : 0.0em;
-fx-padding :0.0 10.0 0.0 0.0;
}
.scroll-bar .increment-arrow,
.scroll-bar .decrement-arrow{
-fx-shape : " ";
-fx-padding :0.15em 0.0;
}
.scroll-bar:vertical .increment-arrow,
.scroll-bar:vertical .decrement-arrow{
-fx-shape : " ";
-fx-padding :0.0 0.15em;
}
.scroll-bar:horizontal .thumb,
.scroll-bar:vertical .thumb {
-fx-background-color :derive(black,90.0%);
-fx-background-insets : 2.0, 0.0, 0.0;
-fx-background-radius : 2.0em;
}
.scroll-bar:horizontal .thumb:hover,
.scroll-bar:vertical .thumb:hover {
-fx-background-color :derive(#4D4C4F,10.0%);
-fx-background-insets : 2.0, 0.0, 0.0;
-fx-background-radius : 2.0em;
}
In order to increase or decrease the -fx-padding for the scrollbar increment-arrow & decrement-arrow ( of course the vertical as well ) and increase or decrease the 0.15em and find the look you want.
The result :
I have problem with styling ComboBox in css. I don't know how to change font color of selected item fx (2 people from black color to red), and how to set color effect when you point mouse on the current choice.
css code:
.combo-box
{
-fx-background-image:url("people_button.jpg");
-fx-text-fill: red;
-fx-min-width: 128;
-fx-min-height: 48;
}
.combo-box-popup .list-view
{
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}
.combo-box-popup .list-view .list-cell
{
-fx-background-color: #ececec;
-fx-text-fill: #9a9a9a;
-fx-font-family: Oxygen Light;
}
and java code:
ComboBox<String> combo = new ComboBox();
combo.setVisibleRowCount(5);
combo.setItems(observableList);
combo.setValue("1 person");
Just add the pseudo-class hover to your style sheet :
.combo-box-popup .list-view .list-cell:hover {
-fx-text-fill: red;
}
For adding a color to the selected item, use the pseudo-class selected :
.combo-box .cell:selected {
-fx-text-fill: red;
}