Web 2: can we change the alternating color of a weblistbox?

Targets Web
1

everything is in the title. thanks.

I would like a listbox without any alternating row color. same color on the whole list.
to make a sidebar menu.

2

You can modify it globally in the App’s HTML Header Property:

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

In general you can use the chrome dev tools to inspect an element’s style, alter the styles you want, and copy them over to your HTML Head under the corresponding “css selector” you want

1 Like
3

I hope to see an option to do it within the IDE in a future version.

4

and is it possible to do it listbox by listbox and not globally for the web app ?

5

You can of course add additional selector modifiers to your Stylesheet in the header and then ensure that exists on your listbox either by design or using ExecuteJavascript to add classes or manipulate the DOM as needed.

6

If you’re looking for more info:

https://api.jquery.com/addClass/
https://api.jquery.com/attr/

Additionally you may support this feedback case to allow us to Add/Remove classes from Xojo controls directly where XOJO will support not wiping them out:
<https://xojo.com/issue/61630>

1 Like
7

this makes a blue alternating color instead of a grey default one.
how can I have the same light grey color on all the rows of the listbox ?

8

Repeat the style but swap the “odd” for “even” in the style sheet and apply whatever color and transparency to both. You can probably remove the “(odd)” altogether but I haven’t tested it

9

I threw some points at it. This seems like an absolute must with the switch to bootstrap style sheets.

10

We need Xojo to allow us to add a class to even/odd rows or add a style property, to be able to change this default code:

<tr id="row_1" role="row" class="odd">

to something like:

<tr id="row_1" role="row" class="odd my-bg">

where ‘my-bg’ is a CSS class with my background-color definition, or

<tr id="row_1" role="row" class="odd" style="background-color: rgba(10, 50, 100, 0.3:">

The same for ‘even’ rows. This way we can have a style per listbox and not global style.

1 Like
11

this is not achievable with the style property of the listbox ?
(sorry I’m a complete newbie with java and css 
)

12

Don’t worry me either. As far as I can tell, Xojo Web 2.0 doesn’t have the option yet, I just see an option for SelectedRowColor

They could bring:
EvenRowBackgroudColor or EvenRowColor
OddRowBackgroundColor or OddRowColor
in a future release.