WebListBox.Style

Targets Web
1

In a Web2 project, in a WebWindow, in a WebListBox on the window, I have this code:

ListBox1.Opening
    me.style.value("white-space") = "normal"

Compile fails with this message:

Window1.Listbox1.Opening, line 1
This method is protected. It can only be called from within its class
me.style.value("white-space") = "normal"

The documentation seems to suggest this should work: WebListBox has a .style property:
https://documentation.xojo.com/api/user_interface/web/weblistbox.html#weblistbox-style

and WebStyle says:
Value(CSSPropertyName As String, Assigns value As String)

Sets the CSS Selector whose name is passed to the value assigned.

https://documentation.xojo.com/api/user_interface/web/webstyle.html#webstyle-value

I feel like I ran into this before in the early Web2 releases, if so, Iā€™m surprised itā€™s still broken.

Am I misunderstanding?

I also tried copying the sample code:

Me.Style.Value("width") = Me.Width.ToString + "px"

which fails to compile with the same message.

2

Thereā€™s an open case for this that has been nominated for the Bug Bash by two users, but the report is only seven months old, so it looks like nobody that experienced it reported it previously.

1 Like
3

Thanks @Anthony_G_Cyphers

A workaround is to use a WebStyleRenderer for every cell of the listbox, like this:

Listbox1.addrow(...)
'Create a renderer from the webstyle and some text
Var style As New WebStyle
style.Value("white-space") = "normal"
Var sr As New WebListBoxStyleRenderer(style, "this is a very long bit of text which we want to word wrap in a WebListbox cell")
lb.CellValueAt(lb.LastAddedRowIndex,0) = sr

But of course thatā€™s very complicated.

4

You could also toss a bit of CSS in the App.HTMLHeader or use JavaScript in the ListBox.Opening event.

5

Haha, yes! Why have a checkbox on the Xojo GUI ā€œ[āˆš] word wrap all cellsā€ when you can force the user to learn CSS and javascript :smiling_face_with_three_hearts:

6

I apologize, just didnā€™t want to you to be unaware of viable options.

2 Likes
7

You can set it globally in the App HTML Header

<style>
.table th {
    white-space: normal; 
}
</style>

Or you can specify it for a special table type

<style>
  .nwsTable .table th {
     white-space: normal; 
}
</style>

Then in the shown event of the WebListbox

ExecuteJavaScript( "$('#" + me.ControlID + "').addClass('nwsTable');" )
3 Likes
8

Somewhat related bug which was closed by ā€œas designedā€ Xojo: Account Login

WebUIControl.WebStyle.value(ā€œwidthā€) changes wrong div

9

The reason I encountered this: I just updated my Web2 project to the latest Xojo (2022R2) and I was noticing word-wrap problems in a few spots in Listboxes. Itā€™s not clear what happened: did 2022R2 break something? Or did 2022R2 fix a bug that I was relying on? Perhaps a workaround I had for 2021 broke in 2022? Iā€™ll have to dig into this to see why.

10

Small note: to get this to work on table Header, you can use this CSS:

<style>
  .nwsTable .table th {
     white-space: normal; 
}
</style>

but to get it to work on the table body, you need to use the ā€˜tdā€™ tag like this:

<style>
  .nwsTable .table td {
     white-space: normal; 
}
</style>

you can do both if you wish:

<style>
  .nwsTable .table th {
     white-space: normal; 
  }
 .nwsTable .table td {
     white-space: normal; 
  }
</style>

and then in WebListBox.Opening:

me.ExecuteJavaScript( "$('#" + me.ControlID + "').addClass('nwsTable');" )

5 Likes