B4J Question Change Customlistview's Scrollbar

[Chris Guanzon]

How to change customlistview scrollbar to this:

Is it possible to do this?

 

[Erel]

This will help you get started:

Based on: https://blog.ngopal.com.np/2012/07/11/customize-scrollbar-via-css/
Note that the suggestion with -fx-shape that removes the arrows doesn't work and will break the style.

Add a file named style2.css with:

.mylistview  .scroll-bar:vertical{
    -fx-background-color:transparent;
 
}
 
/* The increment and decrement button CSS class of scrollbar */
.mylistview .increment-button ,.mylistview .decrement-button {
    -fx-background-color:transparent;
}
 
/* The main scrollbar **track** CSS class  */
.mylistview .scroll-bar:vertical .track {
     -fx-background-color:derive(gray,80%);
     -fx-background-radius: 0em;
     -fx-border-radius:2em;
}
 
/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.mylistview .scroll-bar:vertical .thumb {
    -fx-background-color:derive(blue,90%);
    -fx-background-insets: 0, 0, 0;
    -fx-background-radius: 0em;
}

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "style2.css"))
    MainForm.RootPane.LoadLayout("Layout1")
    MainForm.Show
    Dim n As Node = CustomListView1.sv
    n.StyleClasses.Add("mylistview")
    n = CustomListView1.AsView
    n.Style = ""
    For i = 1 To 20
        CustomListView1.AddTextItem(i, i)
    Next
End Sub

 

[Chris Guanzon]

Thanks a lot.

 

[Erel]

Post your CSS...

 

[Chris Guanzon]

.mylistview  .scroll-bar:vertical{
    -fx-background-color:transparent;
 
}

.mylistview .increment-button ,.mylistview .decrement-button {
    -fx-background-color:transparent;
    -fx-background-radius: 2em;
 
}
 
/* The main scrollbar **track** CSS class  */
.mylistview .scroll-bar:horizontal .track,
.mylistview .scroll-bar:vertical .track{
    -fx-background-color: transparent;
    -fx-border-color: transparent; 
 
    -fx-background-radius: 2em;
    -fx-border-radius:2em;
}
 
/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.mylistview .scroll-bar:horizontal .thumb,
.mylistview .scroll-bar:vertical .thumb {
    -fx-background-color:derive(rgb(33,150,243),0%);
    -fx-background-insets: 5, 0, 0;
    -fx-background-radius: 2em;
 
}

Updated SS