Weblistbox

Targets Web
1

Is there anyway I can make the background on a weblistbox transparent, so you can see an image though it?
I’ve tried to make a style that has a background with apha set to transparent with no luck.

Anyone any ideas?

2

It looks like by default the weblistbox use default colors for each alternate row, for white:

<tr style="background-color: rgb(255, 255, 255);">

but I can’t find an easy way to change it to:

<tr style="background-color: rgba(255, 255, 255, 0);">

for the alternate color:

<tr style="background-color: rgb(237, 243, 254);">

Maybe you can file a feature request to use alpha on primary and alternate color?

3

Sometimes I post something and then I don’t get any comments, I guess I am not clear, sorry for that. Maybe this can illustrate what I’m trying to say.

Xojo default weblistbox just use rgb with background color (solid background). This is a default weblistbox over an image of a soccer ball:

With Safari I can see the source code and change the background color from rgb to rgba and add an alpha value, this is the same weblistbox over the soccer ball but the row colors with rgba and alpha of 0.7:

Will that be hard to add to Xojo? I don’t know, but I’m sure it can be useful to have.

4

i’ve tried things like this too, to see if I can override it.

Me.AddRow " <h1 style="“Background:transparent”";"">This is transparent "

Still no luck

5

Dave you had the right code, but the wrong tag.

This works:

Me.AddRow "<raw> <tr style=""Background:transparent"";"">This is transparent</tr> </raw>"

The issue becomes that the selection bar disappears.

6

Michel, tried to use your code but I get this after multiple Me.AddRow:

I guess I’m doing something wrong.

I hope Xojo can add the Opacity value to primary and alternate colors and this could work. The selection change the class to Selected and it looks like the Opacity will not mess with that.

7

It works here quite nicely in the Weblistbox Open event:

Sub Open() Handles Open for i as integer = 0 to 9 Me.AddRow "<raw> <tr style=""Background:transparent"";"">This is transparent</tr> </raw>" next End Sub

The selection bar becomes unavailable, though.

If you want Xojo to add the alpha value to primary and alternate colors, you should file a feedback case. But don’t hold your breath. It can take months, if not years.

8

Michel, can you tell me what version of Xojo are you using?

I copy/paste your code to open even of weblistbox on Xojo 2019r1.1 and I get the same with Safari, Firefox and Chrome:

9

Alberto, I get the same thing, every item in the listbox seems to be on the same row. I’ve tried adding a newline at the end but no luck. If you do this

listbox1.AddRow " <tr style="“Background:transparent”";"">This is transparent
"

You do get entries under each other, but I think they are still in the same row

10

I think that code is adding transparent lines before the listbox is being populated, eg I add 10 rows, then use listbox.cell to modify first row, it modifies the row at the end of the listbox.

11

Confirmed, you can only use that transparency in the open event, and it adds the rows before the actual listbox rows. So, no good as a workaround.

12

I tried to change the background opacity within a cell by defining a Style and assigning that to me.CellStyle, the problem is that the Row is defined as the Primary or Alternate color with 100% opacity, then the new cell style is assigned. This is the code on the page:

[code]

This is transparent   [/code] I can see the transparent red over the alternate row colors. This won't change the solid color and will mess with the Blue background when a row or cell is selected.
13

I believe I understand what is going on. Instead of simply changing the transparency of the row, the code posted by Dave Duke originally creates a new tr tag.

Here is code that placed in the shown event or in a button turns the background color to transparent for all rows :

dim js as string js = js + "var tbl = document.getElementById('"+ ListBox1.controlID +"_rows');" js = js + "for (i = 0; i < tbl.rows.length-1; i++) { tbl.rows[i].style.backgroundColor='transparent';}" self.ExecuteJavaScript(js)

There is a huge catch, though : each time the user clicks on the Weblistbox, all rows are painted again in white and grey.

Putting that code in SelectionChanged reinstates transparent, but the white and grey rows show for an instant.

It would be probably better to create a custom transparent grid with WebSDK around an HTML table.

14

Thank you Michel, I changed a little your code to get Opacity of 70% with the default alternating colors and it looks like this:

This is the code I used:

dim js as string js = js + "var tbl = document.getElementById('"+ ListBox1.controlID +"_rows');" js = js + "for (i = 0; i < tbl.rows.length-1; i=i+2) { tbl.rows[i].style.backgroundColor='rgba(237,243,254,0.7)'; tbl.rows[i+1].style.backgroundColor='rgba(255,255,255,0.7)';}" self.ExecuteJavaScript(js)

Oops, I made a mistake and the PrimaryRowColor is changing to the AlternateRowColor, just change 237,243,254 to 255,255,255 and vice versa.

I hope they can incorporate this feature request <https://xojo.com/issue/56364> into a future Xojo web version.

15

It does limit the styling ability of Xojo being forced to have a fixed background colour.

16

Sorry, I don’t understand what are you trying to say. Are you talking about the JavaScript code?

Having the rows with transparent colors, then you can apply a Style over it. I added a red color with some alpha level and get this:

If Xojo add the Opacity to Primary and Alternate rows, then you can select a complete transparent if you only want to control the Style color from the cells. I do prefer to have something like this image. Basically is showing:

  • the soccer ball
  • in top of that transparent alternate rows white and blue-gray
  • in top of that all cells with a red transparent color
17

I don’t seem to be able to get that to work unless I make the listbox enabled=false
The code only seems to run on a button and not show.

dim js as string
js = js + “var tbl = document.getElementById(’”+ ListBox1.controlID +"_rows’);"
js = js + “for (i = 0; i < tbl.rows.length-1; i++) { tbl.rows[i].style.backgroundColor=‘transparent’;}”
self.ExecuteJavaScript(js)
listbox1.AddRow "This is new "+ticks.totext
listbox1.ScrollTo listbox1.RowCount-1

18

Putting addrow at top did not work

19

I put the code in Shown and SelectionChanged Events.

20

still no luck this end do you have an example project?