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

Erel

Administrator
Staff member
Licensed User


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

Its content:
B4X:
.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:
B4X:
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "listview.css"))
 

susu

Well-Known Member
Licensed User


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

Its content:
B4X:
.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:
B4X:
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

Active Member
Licensed User
Set interested listview ID

B4X:
ListView.ID = "xxx"
And set #id in css

B4X:
#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;
}
 
Last edited:

susu

Well-Known Member
Licensed User
Set interested listview ID

B4X:
ListView.ID = "xxx"
And set #id in css

B4X:
#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

Well-Known Member
Licensed User
With this CSS:

B4X:
.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

Active Member
Licensed User
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

Well-Known Member
Licensed User
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. :):):)
 
Top