B4J Question ListView Trasparent bug or my error

ivanomonti

Expert
Licensed User
Longtime User
I need to create a grid that is transparent to make the menu or data views, picture below just wants to be the result I would get

2015-04-26_173316.jpg
 

ivanomonti

Expert
Licensed User
Longtime User
Event click button, populate list

B4X:
Sub bt_Action
    Dim bt As Button = Sender
    Select bt.Tag
    Case "Menu of Day"
        lw.Items.Clear
        lw.Style = CssModule.listviewTrasparent
        For Each colroot As Map In ListDay
            lw.Items.Add(colroot.Get("descrizione"))
        Next
    Case "Event"
    Case "Profile"
    Case "Category"
    Case "Production"
    End Select
End Sub

css class
HTML:
.list-view { 
    -fx-opacity: 0.1;
    -fx-font: bold 16pt "Comic Sans MS";
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.list-view:focused {
    -fx-opacity: 0.1;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-background-color: white;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.list-cell {
    -fx-background-color: transparent;
    -fx-padding: 10 10 10 10;
}

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

2015-04-26_214353.jpg
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
I've tried it with this css:
B4X:
.list-view {
  -fx-font: bold 16pt "Comic Sans MS";
  -fx-background-color: transparent;

}

.list-view:focused {
  -fx-background-color: transparent;

}

.list-cell {
  -fx-background-color: transparent;
}
And this code:
B4X:
Sub Process_Globals
   Private fx As JFX
   Private MainForm As Form
   Private lv As ListView
End Sub

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.Show
   lv.Initialize("lv")
   For i = 1 To 100
     lv.Items.Add(i)
   Next
   MainForm.RootPane.Style = " -fx-background-color: green;"
   MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "lv.css"))
   MainForm.RootPane.AddNode(lv, 0, 0, 200, 300)
End Sub

The list itself is transparent:
SS-2015-04-27_07.50.19.png


It does require some work to hide the scrollbar.
 
Upvote 0

ivanomonti

Expert
Licensed User
Longtime User
CSS full
B4X:
.list-view {
    -fx-font: bold 12pt "Comic Sans MS";
    -fx-text-fill: black;
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.list-view:focused {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.list-cell {
    -fx-background-color: transparent;
    -fx-padding: 10 10 10 10;
}

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

.list-view *.scroll-bar:horizontal {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0 0 0 0;
}
.list-view *.scroll-bar:vertical {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0 0 0 0;
}
.list-view *.scroll-bar:horizontal *.thumb {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.list-view *.scroll-bar:vertical *.thumb {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.list-view *.scroll-bar:horizontal *.track {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.list-view *.scroll-bar:vertical *.track {
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.list-view *.scroll-bar *.increment-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.list-view *.scroll-bar *.decrement-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
.list-view *.scroll-bar:horizontal *.increment-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0 0 0 0;
    -fx-shape: null;
}
.list-view *.scroll-bar:vertical *.increment-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0 0 0 0;
    -fx-shape: null;
}
.list-view *.scroll-bar:horizontal *.decrement-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0 0 0 0;
    -fx-shape: null;
}
.list-view *.scroll-bar:vertical *.decrement-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0 0 0 0;
    -fx-shape: null;
}

Thank Erel
 
Upvote 0
Top