I have spent the whole day pulling my hair out trying to find a solution to the following two issues, have even added debug code to the actual listbox framework.js to try and get to the bottom of it but just cannot figure it out.
-
When scrolling a listbox with anything more than a page of rows (e.g. scrollbars shown) then when you scroll on an iDevice it is really cluncky and sticky whereas it is fine on a desktop.
-
If you have a multi column listbox with scrollbars and you set the final column to be right aligned you will see that the content goes behind the scrollbar. In the source is a js variable called pAdderWidth that is a dynamically created padding column that should be set to the width of the scollbar (15px) as a minimum. It does this by calculating the size of all the other columns and adjusting them to add the additional column. Sadly it just doesnt quite work and the additional column is set to the correct width (25) but the other columns are a little too wide and therefore the additional column gets reduced by the browser this the text disappears under the scrollbar. I have tried tweaking the columns using javascript but it just doesnt work consistently and i have even tried tweaking the source framework.js to see where the actual issue is but I am not great with JS and I just cant get to a working solution.
Anyone have any suggestions before I scream and totally lose the plot?
When we did the XDC app this year, we ended up creating a custom TableView for the project. I did a series of blog posts in April which outlined how to construct a control like that.
http://www.xojo.com/blog/en/2014/04/iostableview-web-control.php
I think if you were to follow these instructions, you’ll get something that is more to your liking (and uses some of the features of iOS to make it look and feel more like an iOS TableView).
Thanks Greg, I will go take a look. Had a glass of wine now so feel a bit calmer 
One thing I noticed whilst going through the framework.js for the listbox (apart from how clear the code is), is that the rows are built with every row having its own style on the that sets the background colour for the primary and alternate row. From what I have read this is not a great way of doing it as the browser has to render each row because it sees it as its own style where a trick I have used in the past is to firstly use a class for the alternate row which you use on the alternate rows and you set the table background colour to be the primary rows colour. This way the browser doesnt have to work so hard to do the calculations and render of the rows as it only has half the rows to deal with as different and those are all of the same class rather than different styles (even though they have the same colour settings). These might be small tweaks but on large tables it could make a difference.
I’ve made a few attempts to make the rendering of WebListBox more efficient without breaking existing code and it’s been really tricky. What I’d love to do is use the :even and :odd pseudo classes, but that doesn’t work in IE8, which means we’d have two different code sets… Something we try to avoid if at all possible.
When I looked through the code (about 3 dozen times today) it really does look very clean and optimized. I have used the pseudo classes but as you say they are not respected by all browsers that was why I shifted to the way I suggested above where you only change the alternate rows and use a class for that row rather than a style. The project I was working on we have 1000s of rows coming back (across a local network) and it did make a visible difference to the rendering as the background of the table was the same as the primary row colour.
Do you think you might be able to sort the padding column width issue as I really need to use right aligned columns for the right most one and at present it just isnt possible as the padder is being set to a minimum of 15px but the browser doesnt render it correctly because I think the preceding columns are too wide. I did get it to work by changing the -6 you use for padding to -7 but it wasnt consistent when you have more or less columns. This cant be tweaked at my end because if you have a right aligned block it appears that the browser ignores the padding-right value and I did get it to work by adding in Firebug but when i tried to add this to the text for the cell it was rendered as text and not html so I cant think how else to get around it without you tweaking the source.