Web 2: WebListBox Header Styles

[Andrew_Paul_Dickey]

Hello,

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

Thank you.

Kind regards, Andrew

[Ivan_Tellez]

@Andrew_Paul_Dickey

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

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

there are hacks:

WebListbox Design Hacks

I’m trying to write a fairly simple web app that will take some incoming data and display it on the page. Nothing fancy - it’s to be used in a digital signage application to display a schedule that gets updated throughout the day. Right now I am using a WebListbox to display the data, but I don’t want the “listbox” look. I don’t want the lines to alternate colors. I don’t want dividing lines between the columns. I want to change the text size. Etc. I am sure I can do this with web styles…

and

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

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.

Be aware that this can break on any new release

[Andrew_Paul_Dickey]

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

[Anthony_G_Cyphers]

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

[Andrew_Paul_Dickey]

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

[Jeannot_Muller]

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 .

edit: changed “tables” to “Listboxes”

[Jeannot_Muller]

@Andrew_Paul_Dickey

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

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:

https://blog.xojodocs.com/how-to-customize-xojo-web-2/

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.

[Louis_D]

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.

[Jeannot_Muller]

@Louis_D

For any other usage or where the general CSS formatting is not appropriate, I will prefer the GraffitiSuite grid

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

[Anthony_G_Cyphers]

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

[Hector_Marroquin]

Can we have it by tomorrow?

[Anthony_G_Cyphers]

Maybe.

[Jeannot_Muller]

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

[Anthony_G_Cyphers]

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

[Jeannot_Muller]

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

[David_Cox]

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!

[Hector_Marroquin]

Welcome to the dark side