WinJS ListView auto sizing

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.

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

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

edited May 23 '17 at 11:48

Community

1
1

answered Nov 21 '12 at 16:11

Szymon Rozga

17,971
7
53
66

1

Depending on your performance profile, this may hurt performance. It is probably better to listen to the loadingStateChanged event on the ListView, and use the method you've used to calculate it. If your willing to accept possible breakage later, you can also dive into the DOM and find the element thats actually changing size, and use it's size to set the width that you need. Ultimately, I do question the behaviour you want -- in the application I shipped, it ended up being quite a poor experience. – Dominic Hopton Nov 21 '12 at 18:53

score 0 · Answer 2 · answered Nov 21 '12 at 20:07

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.

WinJS ListView auto sizing

2 Answers2