Learning Xojo

Are you tired of the standard look of a WebListBox in Xojo Web 2? 
Someone asked me today, if I have any tips 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:

Screenshot of a standard listbox

Trying to change the fontsize via ‘style’ unfortunately fails:

Spoiler: There is hope!

Smaller rows, standard font size
Smaller rows, smaller font size

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

Comments

Sign in or become a blog.xojoDOCs.com member to join the conversation.
Just enter your email below to get a log in link.



You’ve successfully subscribed to blog.xojoDOCs.com
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.