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 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;
}