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

Erel

B4X founder
Staff member
Licensed User
Longtime User
SS-2017-05-18_16.16.07.png


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"))
 
Upvote 0

susu

Well-Known Member
Licensed User
Longtime User
SS-2017-05-18_16.16.07.png


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.
 
Upvote 0

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:
Upvote 0

susu

Well-Known Member
Licensed User
Longtime 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.
 
Upvote 0

susu

Well-Known Member
Licensed User
Longtime 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?
 
Upvote 0

susu

Well-Known Member
Licensed User
Longtime User
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.
 

Attachments

  • test Listview.zip
    8.8 KB · Views: 273
Upvote 0

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
 
Upvote 0

susu

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