# WebListBox.Style "protected"?

**URL:** <https://forum.xojo.com/t/weblistbox-style-protected/71144>\
**Category:** Web\
**Created:** [July 12, 2022, 5:47pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144 "2022-07-12T17:47:52Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 12, 2022, 5:47pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/1 "2022-07-12T17:47:52Z")

</div>

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

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

```

or

```auto
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?

---

<div class="post-metadata">

**Author:** ![Chay\_Wesley](https://forum.xojo.com/user_avatar/forum.xojo.com/chay_wesley/32/7755_2.png) [@Chay\_Wesley](https://forum.xojo.com/u/Chay_Wesley)\
**Post date:** [July 12, 2022, 6:51pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/2 "2022-07-12T18:51:18Z")

</div>

[https://tracker.xojo.com/xojoinc/xojo/-/issues/66975](https://tracker.xojo.com/xojoinc/xojo/-/issues/66975)

---

<div class="post-metadata">

**Author:** ![Tom\_Dixon](https://forum.xojo.com/user_avatar/forum.xojo.com/tom_dixon/32/605_2.png) [@Tom\_Dixon](https://forum.xojo.com/u/Tom_Dixon)\
**Post date:** [July 12, 2022, 7:38pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/3 "2022-07-12T19:38:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jean-Yves\_Pochez](https://forum.xojo.com/user_avatar/forum.xojo.com/jean-yves_pochez/32/21769_2.png) [@Jean-Yves\_Pochez](https://forum.xojo.com/u/Jean-Yves_Pochez)\
**Post date:** [July 12, 2022, 7:48pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/4 "2022-07-12T19:48:21Z")

</div>

> [@Tom\_Dixon](#):
>
> You will no longer be able to use the opening event, but it may work

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](https://documentation.xojo.com/getting_started/object-oriented_programming/class_properties-_methods_and_events.html#event-definitions)

---

<div class="post-metadata">

**Author:** ![Tom\_Dixon](https://forum.xojo.com/user_avatar/forum.xojo.com/tom_dixon/32/605_2.png) [@Tom\_Dixon](https://forum.xojo.com/u/Tom_Dixon)\
**Post date:** [July 12, 2022, 7:50pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/5 "2022-07-12T19:50:31Z")

</div>

Doh! Thanks @Jean-Yves_Pochez !

---

<div class="post-metadata">

**Author:** ![Tom\_Dixon](https://forum.xojo.com/user_avatar/forum.xojo.com/tom_dixon/32/605_2.png) [@Tom\_Dixon](https://forum.xojo.com/u/Tom_Dixon)\
**Post date:** [July 12, 2022, 9:02pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/6 "2022-07-12T21:02:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 2:33am UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/7 "2022-07-13T02:33:48Z")

</div>

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](http://Bootswatch.com). I am using Xojo 2022 R1.1.

---

<div class="post-metadata">

**Author:** ![Hector\_Marroquin](https://forum.xojo.com/letter_avatar_proxy/v4/letter/h/cdc98d/32.png) [@Hector\_Marroquin](https://forum.xojo.com/u/Hector_Marroquin)\
**Post date:** [July 13, 2022, 2:54am UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/8 "2022-07-13T02:54:05Z")

</div>

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

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

```

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

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

ExecuteJavaScript(js)

```

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 4:02am UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/9 "2022-07-13T04:02:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 12:58pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/10 "2022-07-13T12:58:17Z")

</div>

> [@Hector\_Marroquin](#):
>
> ```auto
> .listBlackFontColorSelected table.dataTable tbody tr.selected {
> color:black !important;
> }
> 
> ```

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?

---

<div class="post-metadata">

**Author:** ![Anthony\_G\_Cyphers](https://forum.xojo.com/user_avatar/forum.xojo.com/anthony_g_cyphers/32/16862_2.png) [@Anthony\_G\_Cyphers](https://forum.xojo.com/u/Anthony_G_Cyphers)\
**Post date:** [July 13, 2022, 12:59pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/11 "2022-07-13T12:59:41Z")

</div>

It should be:

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

```

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 1:07pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/12 "2022-07-13T13:07:35Z")

</div>

> [@Anthony\_G\_Cyphers](#):
>
> ```auto
> <style>
> .listBlackFontColorSelected table.dataTable tbody tr.selected {
> color:black !important;
> }
> </style>
> 
> ```

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).

---

<div class="post-metadata">

**Author:** ![Anthony\_G\_Cyphers](https://forum.xojo.com/user_avatar/forum.xojo.com/anthony_g_cyphers/32/16862_2.png) [@Anthony\_G\_Cyphers](https://forum.xojo.com/u/Anthony_G_Cyphers)\
**Post date:** [July 13, 2022, 1:10pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/13 "2022-07-13T13:10:01Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 1:27pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/14 "2022-07-13T13:27:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 3:05pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/15 "2022-07-13T15:05:10Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Anthony\_G\_Cyphers](https://forum.xojo.com/user_avatar/forum.xojo.com/anthony_g_cyphers/32/16862_2.png) [@Anthony\_G\_Cyphers](https://forum.xojo.com/u/Anthony_G_Cyphers)\
**Post date:** [July 13, 2022, 3:10pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/16 "2022-07-13T15:10:18Z")

</div>

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.

> [@WebListbox Design Hacks](https://forum.xojo.com/t/weblistbox-design-hacks/61962/13):
>
> In CSS: .XojoListBox .DTFC\_ScrollWrapper, .XojoListBox .table, .XojoListBox .dataTables\_wrapper tr.buffer { background-color: #f00 !important; } You can swap the #f00 bit for transparent or any valid color value.

> [@Another WebListbox CSS Challenge - Different Header Background?](https://forum.xojo.com/t/another-weblistbox-css-challenge-different-header-background/70988/3):
>
> Here’s my solution to preserve all of the previous styling and apply a disabled state to the header (and set the table’s Enabled property). Add the following method to a module (as I assume you’ll be using this in multiple places, it makes the most sense to create an extension method): Public Sub setEnabled(extends l as WebListBox, value as Boolean) l.Enabled = value l.ExecuteJavaScript( "$('#" + l.ControlID + "')." + if( l.Enabled, "remove", "add" ) + "Class('disabledTable');" ) End Sub M…

> [@Web2 WebListbox - borderless and no alternating row color?](https://forum.xojo.com/t/web2-weblistbox-borderless-and-no-alternating-row-color/70885/19):
>
> Using what I provided above, replace the App.HTMLHeader content with this to combine everything and remove all borders and backgrounds: \<style\> .borderlessTable, .borderlessTable table, .borderlessTable table td, .borderlessTable table th, .borderlessTable table tr, .borderlessTable .dataTables\_scrollHead, .borderlessTable .dataTables\_scrollBody { border-color: transparent !important; background-color: transparent !important; background-image: none !important; } \</st…

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 4:41pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/17 "2022-07-13T16:41:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Hector\_Marroquin](https://forum.xojo.com/letter_avatar_proxy/v4/letter/h/cdc98d/32.png) [@Hector\_Marroquin](https://forum.xojo.com/u/Hector_Marroquin)\
**Post date:** [July 13, 2022, 4:55pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/18 "2022-07-13T16:55:00Z")

</div>

Correct. I forgot to mention that 🙂

---

<div class="post-metadata">

**Author:** ![Thomas\_Moore](https://forum.xojo.com/user_avatar/forum.xojo.com/thomas_moore/32/551_2.png) [@Thomas\_Moore](https://forum.xojo.com/u/Thomas_Moore)\
**Post date:** [July 13, 2022, 10:31pm UTC](https://forum.xojo.com/t/weblistbox-style-protected/71144/19 "2022-07-13T22:31:00Z")

</div>

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

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

```

suggestion for the App.HTMLHeader and

```auto
// 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.