Are you tired of the standard look of a WebListBox in Xojo Web 2?
Someone asked me today if I have any tips on how to achieve that.

Introduction

Generally speaking, the row heights are based on the contents of the row, not a static value. But there are a few parameters left, which we could alter in theory: the padding and the font size for instance.

Let’s start with the typical view of a Listbox:

Trying to change the font size via ‘style’ unfortunately fails:

Spoiler: There is hope!

How did we achieve this?

Just try the code below and play around with it yourself. The Magic consists in using a WebListBoxStyleRenderer. In this example, I’m only “eliminating” the padding on the top and on the bottom by setting them to 0. You can as well use style.value(“padding”) = “0” but then the padding on the left and the right are eliminated as well.

// There is no need to define 'style' as it is part of the WebListBox 'style.FontSize = 10 style.value("padding-top") = "0" style.value("padding-bottom") = "0" Var wrapperFirstname as WebListBoxStyleRenderer Var wrapperLastname as WebListBoxStyleRenderer me.HeaderAt(0) = "Firstname" me.HeaderAt(1) = "Lastname" // First Row me.AddRow( "") wrapperFirstname = new WebListBoxStyleRenderer(style, "Jeannot") wrapperLastname = new WebListBoxStyleRenderer(style, "Muller") me.CellValueAt( me.LastAddedRowIndex, 0 ) = wrapperFirstname me.CellValueAt( me.LastAddedRowIndex, 1) = wrapperLastname // Second Row me.AddRow( "") wrapperFirstname = new WebListBoxStyleRenderer(style, "Urs") wrapperLastname = new WebListBoxStyleRenderer(style, "Keel") me.CellValueAt( me.LastAddedRowIndex, 0 ) = wrapperFirstname me.CellValueAt( me.LastAddedRowIndex, 1) = wrapperLastname // Third Row me.AddRow( "") wrapperFirstname = new WebListBoxStyleRenderer(style, "John") wrapperLastname = new WebListBoxStyleRenderer(style, "Believemenott") me.CellValueAt( me.LastAddedRowIndex, 0 ) = wrapperFirstname me.CellValueAt( me.LastAddedRowIndex, 1) = wrapperLastname