WebListBox.Style "protected"?

Targets Web
1

If I enter the following code into a WebListBox’s Shown or Opening event:

me.Style.Value("background-color") = color.LightGray

or

var w As New WebStyle
w.BackgroundColor = color.LightGray
me.Style = w

I get a compiler error message “This method is protected. It can only be called from within the class.”

I am trying to follow in the footsteps of examples I see in the documentation, where this seems to be done for other controls. What am I missing?

2

https://tracker.xojo.com/xojoinc/xojo/-/issues/66975

1 Like
3

Try subclassing the WebListbox and putting the Style in the Opening event of the subclassed WebListbox. You will no longer be able to use the opening event, but it may work. I got a similar message trying to set RowSelectionType to none and when I put it in the opening event of the subclassed WebListbox I didn’t get the compile error and the WebListbox rows were not selectable so it may work for the background color.

4

you can create an “opening” event definition, and raise it from the subclass opening event
then you can have an opening event in your subclass’s subclasses.

https://documentation.xojo.com/getting_started/object-oriented_programming/class_properties-_methods_and_events.html#event-definitions

5

Doh! Thanks @Jean-Yves_Pochez !

6

I tried my suggested solution and the error goes away but it does not change the background color.

7

Any ideas for a workaround? What I really want to do is change the color of the text in my WebListBox to black. The Bootstrap theme that I chose is beautiful except that the WebListBox, for no known reason, renders the text as white, which makes them unreadable.

I’ve tried the WebListBoxStyleRenderer, which somehow fails (again, I am trying to follow the documentation, but when I try almost exactly what is suggested, it somehow silently fails, so that rows do not display at all.

I should probably go into the Bootstrap theme to do this, but I have no idea how. The .table styles seem to have nothing to do with the text color, though the min.css file is hard to read.

I believe the theme is “Darkly” from Bootswatch.com. I am using Xojo 2022 R1.1.

8

I had a similar need, what I did was add this CSS class in the App HTML Header

.listBlackFontColorSelected table.dataTable tbody tr.selected {
    color:black !important;
}

Then in the weblistbox shown event I add the class using this code:

// Add the Class that Handles the Selected Font Color
Var js As String
js = "document.getElementById(""" + Me.ControlID + """).classList.add('listBlackFontColorSelected');"

ExecuteJavaScript(js)
9

Thanks so much, Hector! I’ll give it a try.

10

Hmm, when I put this in the App.HTMLHeader, it displays as text at the top of the opening page in my app. I put the other code in the Shown event, but nothing changes. Am I doing something wrong?

11

It should be:

<style>
.listBlackFontColorSelected table.dataTable tbody tr.selected {
    color:black !important;
}
</style>
12

Duh, I should have thought of that. But my HTML skills are not great.

So that helps somewhat. But now the text in the WebListBox displays black only when I actually select a row in the table (and then only after delaying for a second). I’d like to have the text display black normally, but white when selected (since the selection background is dark blue).

13 
<style>
.listBlackFontColorSelected table.dataTable tbody tr {
    color:black !important;
}
</style>
14

Better! The unshaded rows now have black text. But the rows in the table that are shaded still have white text, and when one hovers over the row, the text is white.

15

The Bootstrap theme I am using seems to think that the background of the WebListBox should be dark, but somehow, the background is white, and I am guessing that is imposed by Xojo on top of the theme. Does anyone have an idea about how to make the WebListBox background a different color?

16

There are a number of threads around where a group of us have been supplying CSS to modify the built-in style of the WebListBox. Here’s a few, but a search of the forums should be enlightening.

1 Like
17

Thanks, Anthony. I’ll check this out.

But I can’t help but think this all should be simpler… I hope the bug gets fixed soon.

1 Like
18

Correct. I forgot to mention that :slight_smile:

19

OK, finally got it working, sort of. I messed around in the Bootstrap theme to set every table style color I could find to black. I also changed the WebListBox selection color to be consistent with black (since I could not figure out how to get the “active color” set to white in a way that worked). That almost got everything working, except that if I selected a non-striped row and then moved away from it, the text in the selected row would go white. I guessed that that must have to do with something Xojo was doing to override the Bootstrap theme, so I used Anthony’s

<style>
.listBlackFontColorSelected table.dataTable tbody tr {
    color:black !important;
}
</style>

suggestion for the App.HTMLHeader and

// Add the Class that Handles the Selected Font Color
Var js As String
js = "document.getElementById(""" + Me.ControlID + """).classList.add('listBlackFontColorSelected');"

ExecuteJavaScript(js)

in the Shown event of the WebListBox. Then everything seems to work. Thanks Anthony!

Note that this only works to solve my particular problem. It does not solve the problem that the WebListBox.Style is protected, which is apparently a bug, as indicated in Chay’s message.

2 Likes