B4J Question SOLVED: Different background colors for odd/even rows in ListView

[b4auser1]

How to remove different colors for odd/even rows in ListView ?

 

[Erel]

Create a file named listview.css and put it in the Files tab.

Its content:

.list-cell:filled:selected:focused, .list-cell:filled:selected {
  -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
  -fx-text-fill: white;
}

.list-cell:odd {
  -fx-background-color: white;
}

.list-cell:filled:hover {
  -fx-background-color: #0093ff;
  -fx-text-fill: white;
}

(based on: http://stackoverflow.com/questions/15641478/javafx-css-styling-listview)

Load the css file with:

MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "listview.css"))

 

[susu]

Create a file named listview.css and put it in the Files tab.

Its content:

.list-cell:filled:selected:focused, .list-cell:filled:selected {
  -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
  -fx-text-fill: white;
}

.list-cell:odd {
  -fx-background-color: white;
}

.list-cell:filled:hover {
  -fx-background-color: #0093ff;
  -fx-text-fill: white;
}

(based on: http://stackoverflow.com/questions/15641478/javafx-css-styling-listview)

Load the css file with:

MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "listview.css"))

This way will apply style to all listview in MainForm. How to apply to only 1 specific listview? Thanks for your help.

 

[PatrikCavina]

Set interested listview ID

ListView.ID = "xxx"

And set #id in css

#xxx .list-cell:filled:selected:focused, #xxx .list-cell:filled:selected {
  -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
  -fx-text-fill: white;
}

#xxx .list-cell:odd {
  -fx-background-color: white;
}

#xxx .list-cell:filled:hover {
  -fx-background-color: #0093ff;
  -fx-text-fill: white;
}

 

[susu]

Set interested listview ID

ListView.ID = "xxx"

And set #id in css

#xxx .list-cell:filled:selected:focused, .list-cell:filled:selected {
  -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
  -fx-text-fill: white;
}

#xxx .list-cell:odd {
  -fx-background-color: white;
}

#xxx .list-cell:filled:hover {
  -fx-background-color: #0093ff;
  -fx-text-fill: white;
}

Thank you. You help me alot. But I think there's a bug: text color in .list-cell:filled:selected:focused, .list-cell:filled:selected is ALWAYS WHITE although I change to another colors.

 

[susu]

With this CSS:

.list-cell:filled:selected:focused, .list-cell:filled:selected {
  -fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
  -fx-text-fill: black;
}
.list-cell:odd {
  -fx-background-color: white;
}
.list-cell:filled:hover {
  -fx-background-color: #0093ff;
  -fx-text-fill: black;
}

Why text color of selected cell does not change to black?

 

[PatrikCavina]

For me it works. Watch this example and css file in files folder

 

[susu]

For me it works. Watch this example and css file in files folder

Your code worked! I copied your css to my example but it doesn't work. I'm really confused. Please check my code.

 

[susu]

@PatrikCavina, could you please check my code? Thank you so much.

 

[PatrikCavina]

You are using labels within a listview, and not a normal text items.
The css file is applied to the base items, such as the text, of the listview.
If you want to use a label instead a normal text, you must specify the css for the label and not for the listview.
I hope i was clear

 

[susu]

You are using labels within a listview, and not a normal text items.
The css file is applied to the base items, such as the text, of the listview.
If you want to use a label instead a normal text, you must specify the css for the label and not for the listview.
I hope i was clear

Yeah! That's correct answer. I really really thank you so much.