Suggestions on the best way to right align a column in a web 2.0, weblistbox ?
Many thanks
the only way I’ve found is to make my own websdkuicontrol and have a perfect bootstrap table element that I can modify the way I want.
I can set the witdh os a column even if it has been filled with a webdatasource (which I dont use btw),
I can also set the witdh of each column.
I even will soon be able to have draggable rows…
The WebListBoxStyleRenderer class will do the trick. Here is an example assuming your have a WebListBox with 3 columns, add this code to its Opening event:
Var centeredStyle As New WebStyle
centeredStyle.Value("text-align") = "center"
Var rightAlignStyle As New WebStyle
rightAlignStyle.Value("text-align") = "right"
Me.AddRow("Left", "", "")
Me.CellValueAt(Me.LastAddedRowIndex, 1) = New WebListBoxStyleRenderer(centeredStyle, "Centered")
Me.CellValueAt(Me.LastAddedRowIndex, 2) = New WebListBoxStyleRenderer(rightAlignStyle, "Right")
If you want to create more advanced cells, you can use the generic WebListBoxCellRenderer. A tutorial can be found here:
Part 1: A Deep Dive into Custom Cell Renderers, Part I – Xojo Programming Blog
Part 2: A Deep Dive into Custom Cell Renderers, Part II – Xojo Programming Blog
Hope this helps!
2 Likes
please note that this will not work if you use the webdatasource in conjunction with the weblistbox.
1 Like
In that case, you can achieve it with some CSS.
- Add the class to the control you want to modify:
For i As Integer = 0 To 10
Me.AddRow("Foo", "Bar", "Baz")
Next
Me.ExecuteJavaScript("$('#" + Me.ControlID + "').addClass('rightAlignExample')")
- Add this CSS to your App’s HTML Header section:
<style>
.rightAlignExample td:nth-child(2) {
text-align: right;
}
</style>
The result:
3 Likes