How to completely remove the default table-striped / box-shadow from WebListBox in Web 2.0?

Targets Web
1

Hi everyone,

I’m trying to change the default behavior of the WebListBox component in Xojo Web 2.0. By default, it always renders with an alternating “table-striped” look, where the odd rows have a subtle background tint generated by a box-shadow property.

I want my WebListBoxes to have a completely flat, solid white background for all rows (no alternating stripes/shadows).

I am currently using a custom bootstrap.min.css theme in my project. I’ve tried editing all the table colors, row styles, and background values within that file, but I cannot seem to override or get rid of that persistent box-shadow on the odd rows. It keeps showing up on every WebListBox across the app.

Could someone point me in the right direction?

  • Is there a specific CSS class name or selector I should target in my custom CSS or App.HTMLHeader to force the box-shadow to none?

  • Or is there a native Xojo way to disable the striped/shadowed style entirely for the control?

Any code snippets or advice on how to force a clean, plain white look would be greatly appreciated!

Thanks in advance.

i.e.:

Captura de pantalla 2026-07-01 a la(s) 00.21.48
Captura de pantalla 2026-07-01 a la(s) 00.21.48652×275 14.2 KB

2

this should do the trick
in the app htmlheader

<style>
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(233 236 239 / 22%);}

.table-striped tbody tr:nth-of-type(even) {
    background-color: rgb(233 236 239 / 22%);
.thead-light;}
</style>
3

(post deleted by author)

4

Hola Hugo,

You can try two ways:

  1. Completely disable stripes on every WebListBox:
// Add this to the App's HTMLHeader field
<style>
.XojoListBox {
  --dt-row-stripe: none;
}
</style>
  1. Override .table-striped styles on specific WebListBox:
// Add this to the App's HTMLHeader field
<style>
.XojoListBox.no-stripes {
  --dt-row-stripe: none;
}
</style>

// Then add this to the WebListBox.Opening event
Me.CSSClasses.Add("no-stripes")

I hope that helps.

2 Likes