Web 2: WebListBox Header Styles

Hello,

Can someone remind me the most efficient / correct / v2021 r1.1 way to style a WebListBox header?

Thank you.

Kind regards, Andrew

The correct way sould be a propper way to do it bay xojo but…

there are hacks:

and

Be aware that this can break on any new release :roll_eyes:

Thanks Ivan,

Wow!

I thought I had asked the simplest of questions.

I stopped to think for a moment, before realising we are 7 releases (V2020 x 5 Releases | V2021 x 2 Releases) into Web 2.0 and it seems there is no inbuilt way to create and apply a style to the WebListBox header.

There is WebListBoxStyleRenderer for WebListBox rows, but no WebListBoxHeaderStyleRenderer for WebListBox headers.

Using WebListBoxStyleRenderer regularly does add a great many lines of code to a project.

It is worth noting that some of the hacks listed do not behave as documented in V2021 R1.1.

Kind regards, Andrew

If you show me what you are trying to achieve, I can probably help you either with a customized theme or JavaScript.

Thank you Anthony, I’m ok with re-theming and/or JavaScript, I was merely checking on whether there was a Xojo centric method to do this. I had thought given the passive of time (and releases) this would have moved forward a bit by now.

Thank you for your offer though. Much appreciated.

Kind regards, Andrew

1 Like

The fastest way is to inject your own CSS into the app.header property. If I would want xojodocs.com to look like this:

I would put the following code snippet into the App.Header property in the IDE:

<style>
.table thead th {

border-bottom: 4px solid #0000ff;
background-color: #fefcdd;
color: #ff0000;

}
</style>

Note that this has a downside, as it will change the look of all(!) Listboxes in your Web 2 project. So for xojodocs.com the “changelog screen” would change as well, and that’s something you might not want to have.

You can find a few more information here:
https://forum.xojo.com/t/web-2-0-weblistbox-header-style/53471

Changing CSS is not a big difference from the styles of Web 1. But the issue is that w/o javascript injection you can’t (currently) do it for a specific control only. I bet that the whole control will still change (as there many open Feedback cases), so I don’t put any effort into it yet. But that’s pure speculation and only my opinion :wink: .

edit: changed “tables” to “Listboxes”

2 Likes

It helps a bit to create an own method you will call to use a WebListBoxStyleRenderer, to make your code easier to read.

Besides that: the following article might help you in getting a bit deeper into CSS and to learn, what parameters need to be changed:

The article is not specifically about listboxes, but the procedure to find the right changes which need to be applied is the same.

There is nothing bad about CSS per se at my opinion. As the former webstyle were just a kind of “wrapper” to achieve the same thing. You had to “learn” those Webstyles too, so why not jump into CSS directly. But currently the bad thing is, that not all CSS entities are addressable directly (w/o the style argument of a control or even Javascript) or they are on “theme” level which implies that they are then valid of all instances of that control in your project.

This is also how I do it.

The only problem here is that all listboxes take the formatting. There are legitimate use cases where you want certain tables to be presented a certain way and other tables a different way. For example, a data selection dialog and an order entry screen.

For this reason, I use the Xojo listbox for data selection and information display, where the same formatting is generally OK. For any other usage or where the general CSS formatting is not appropriate, I will prefer the GraffitiSuite grid, that comes with more customizing options.

1 Like

Yep, same here. Plus that one won’t change in the near future. It might get extended, but will probably not show fundamentally.

Oh, the next release has all kinds of extended functionality.

:fire: :fire: :fire:

3 Likes

Can we have it by tomorrow? :slight_smile:

Maybe.

1 Like

Maybe, if tomorrow is the day, when it is ready :slight_smile:

Or it could even be today. Maybe as we speak. You never know…

1 Like

DNS-like attack on your homepage in 3, 2, 1 … :-).

1 Like

Today I will be converting my main ListBox/WebListbox to GraffitiGrid, as I have waited for over a year for the WebListBox to get fixed, plus I get more capabilities. So Anthony, you have won me over!

3 Likes

Welcome to the dark side :slight_smile:

3 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.