WinJS ListView auto sizing - windows-8

Question

I want to display a ListView in WinJS which never shows it's own scroll bar. I want it instead to grow horizontally into its parent container. The way in which I've implement it is basically by setting the min-width css property on the ListView. On initial load, this works flawlessly. When additional data is loaded into the backing data source (a WinJS.Binding.List in this case), I expect the ListView to draw the elements and resize itself. Instead, the ListView draws the elements and adds its own scroll horizontal bar. After about a second or two, suddenly the ListView is resized automatically and fits into the parent container.
How can I have this resize happen immediately after elements have been added? Force layout won't work because it redraws every single item and I am populating a lot of elements into this ListView.

Answer 1

I agree with Dominic, that you should try to listen to the loadingStateChanged event on the listview control. There is a chance that it won't fire immediately, in which case i would show the progress element over your list and wait for it to redraw, then remove the progress.

Answer 2

I used a technique I found on how to detect overflow on a div. Basically, after I add all the new data items, I ensure that increase the size of the ListView's parent div until the ListView div doesn't have overflow anymore.
Edit: so in the end I decided against this strategy because of the advice as a result of this post. I looked at the built in Grid project template and figured out how to ensure that the list view fits in the whole screen properly. I used the following CSS.
#listid{
height: 100%;
position: relative;
width: 100%;
z-index: 0;
}
#section[role=main]{
margin-left: 0;
}
#listid .win-horizontal.win-viewport .win-surface {
margin-left: 120px;
margin-right: 115px;
}