WebListBoxImageRenderer unwanted padding

Targets Web
1

Xojo 2020r21. See the screen shot.

When I use WebListBoxImageRenderer to assign an image to a listbox cell I end up with unwanted padding top and bottom. Magenta in the screenshot. Anyone know a CSS or JS trick to get rid of it?

I’ve tried adding the following style overrides in the App HTML header but it’s not made a difference

<style>
.no-border-img {
    border: none !important;
    outline: none !important;
    padding: 0;
    margin: 0;
}

.borderlessTable tbody td {
  border-top-width: 0 !important;
}
</style>

I’m aware that this is fixed in a later version of the Xojo. Oh how I laughed when I clicked the Build button and reaslised I’d spent all day using a later version that I don’t have a licence for. :cry:

padding
padding742×424 7.61 KB

2

I don’t have 2020r2.1 installed to test.
I can download it tonight but will help me if you create a sample project, zip it, and upload here to test.
Basically what I do is use the Developer Tools from the browser, inspect the element I want to change and start trying settings until I get what I need.
Maybe someone can help you before then.

3

Thanks for your attention.

Test web project attached.
test-padding-xojo2020r2_1.xojo_binary_project.zip (8.9 KB)

4

You can add this to you App HTML Header:

.table td, .table th {
    padding: .1rem ; 
}

Hope this helps.

Edit: change the .1 value to what you like, the default we are overriding is .75

3 Likes
5

Many thanks @AlbertoD

That’s what I needed.

2 Likes