Are there Workarounds for weblistbox header alignment

Targets Web
1

Hi

I’m trying to find a workaround for the headers that get misaligned on weblistbox when it is made invisible / visible.

I have tried using labels instead and that’s great until it has to scroll and then it’s a pain.

I wondered if there was anyone out there that had a good solution.

Thanks.

Russ

2

The workaround is not terribly complicated, but requires JavaScript.

The Weblistbox headers is a table, which ID is the Weblistbox ControlID+"_headers"
The Weblistbox rows is a table, which ID is the Weblistbox ControlID+"_content"

What you can do in JavaScript is cycle through the td in the first row of content and for each td get offsetWidth, then apply that width to the corresponding td in headers.

3

Thanks Michel,
I think that might be beyond my abilities.

Russ

4

Ok. So… I don’t have any idea how to do this!
I looked at the developer tools in chrome and I can see the list box table element, I’m guessing getelementbyid is part of it and control.executejavascript but these are just guesses is there anything in the Xojo examples that might point me in the right direction?

5

I just worked quickly on the problem, and it seems offsetWidth does not report the accurate width of columns for the content of the table, resulting in an offset anyway.

Sorry, it does not seem to work as expected.

Here is the JavaScript in case someone else has a better idea :

[code]Heading = document.getElementById("_headers");
Rows = document.getElementById("_rows")
Clmns = Rows.rows[0].cells.length;

for (column = 0; column < Clmns; column++) {
Heading.rows[0].cells[column].style.width = Rows.rows[0].cells[column].offsetWidth +‘px’
} ;
[/code]

  • is the control ID I replaceAll before executeJavaScript.
6

[quote=366343:@Michel Bujardet]I just worked quickly on the problem, and it seems offsetWidth does not report the accurate width of columns for the content of the table, resulting in an offset anyway.

Sorry, it does not seem to work as expected.

Here is the JavaScript in case someone else has a better idea :

[code]Heading = document.getElementById("_headers");
Rows = document.getElementById("_rows")
Clmns = Rows.rows[0].cells.length;

for (column = 0; column < Clmns; column++) {
Heading.rows[0].cells[column].style.width = Rows.rows[0].cells[column].offsetWidth +‘px’
} ;
[/code]

  • is the control ID I replaceAll before executeJavaScript.[/quote]
    I remember having same problem and once refreshed the page the table looks properly , I raised the issue and XOJO team I guess they told me that I should not use dynamic width and go with fix one and it will work but never tested honestly as it was an in-house app to help us with some stats.

I think the issue was here , maybe it helps

7

Hi.

I thought I’d replied earlier but it didn’t appear somehow!

Anyway thanks for the link. I’ve had a test of a few things and it seems that the cell values are actually aligned wrongly when the columnstyle is set to right aligned.
There is no way to rightpad the values and the text ends up in the next column. I also tried to add some spaces to the end of the cell text but it had no effect so I think I’m missing something!

I’ll continue to test and see if I can make sense of it