Xojo2024R2.1: WebListBox - how to set fonts in App header

Targets Web
1

I hope this is easy for experts who want to help me.

When I use this code in Opening event of the WebListBox control:

Me.style.value("font-family") = "Roboto Condensed, sans-serif"
Me.style.value("font-size") = "12px"

I get the font for header and row.

I want to use this font for all WebListBoxes so I thought I use App header with this:

div.dts tbody th, div.dts tbody td {
    font-family: Roboto Condensed, sans-serif;
    font-size: 12px;
}

but it only changes the font in rows.

What do I need to do to set header font in App header?

2

You can run you app without the me.style.value in opening event, check with the browser developer tools the settings that you get, then run again with me.style.value in opening event and see the differences.

Define your CSS in App HTML Header to match what you get with me.style.value

If you need help with this, I may be able to create a guide over the weekend.

1 Like
3

If you can help with the guide that would be great, thank you.

4

Mini guide:
image

image

image
image1449×233 70.4 KB

We copy the right side (inside rectangle to App HTML Header)

    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;

We need a class, the one we see is ‘XojoListBox’ we try that and commenting out Opening event code (we need a period):

<style>
.XojoListBox {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
}
</style>

result:

image

Hope this helps.

Edit: this sets the font/size for all WebListboxes

Sample code:
fontsWebListBox.xojo_binary_project.zip (8.2 KB)

5

What is that ?

https://documentation.xojo.com/api/user_interface/web/weblistbox.html#weblistbox

I do not saw command(s) to do that for the header.

Maybe a css (or JavaScript) ?

6

App HTML Header
image

7

Yes, you may have a different name, it is WebApplication class name.

Screenshot 2024-08-30 at 1.28.25 PM
Screenshot 2024-08-30 at 1.28.25 PM2046×364 63.8 KB

8

Thank you. I will go over this.

In the meantime, I have included this:

.XojoListBox .table td, .XojoListBox .table th {
   ...
    font-family: Roboto Condensed, sans-serif;  // 2024.08.30 <gp> added
    font-size: 12px;  // 2024.08.30 <gp> added
}

in the “_xojoListBox.scss” file and compiled the css file and removed entries from App HTML Header and Opening event of the WebListBox, it seems that it works expected.

ps. I always learn a lot from you, thank you.