Problem with WinJS.UI.ListView not rendered when in snapped view

Question

I have 2 div, one for the snapped view, the other for the fullscreen. I changed the "HTML ListView working with data sources" sdk sample (scenario 2) to look like this :

	<div data-win-control="SdkSample.ScenarioOutput">
		<div id="tileTemplate" data-win-control="WinJS.Binding.Template">
			<div class="tileTempl">
				<h6 class="counter" data-win-bind="innerText: counter"></h6>
				<h1 class="letter" data-win-bind="innerText: letter"></h1>
			</div>
		</div>

		<div class="fullscreenOnly">
			<div id="listView2" class="box" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'multi', reorderable: true,  layout: { type: WinJS.UI.GridLayout, maxRows: 1 } }">
			</div>
		</div>
		<div class="snappedOnly">
			<div id="listView2Snapped" class="box" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'multi', reorderable: true,  layout: { type: WinJS.UI.GridLayout, maxRows: 1 } }">
			</div>
		</div>

and I used this in the default.css:

@media screen and (-ms-view-state: snapped) {
	.fullscreenOnly { display: none; }
	.snappedOnly { height: 100%; width: 100%; }
}

@media screen and (-ms-view-state: fullscreen-landscape) {
	.snappedOnly  { display: none; }
	.fullscreenOnly{ height: 100%; width: 100%; }
}

When I display the ListView if fullscreen it's ok, but when I go in snapped view, I don't see anything. In fact, the ListView doesn't seem to be rendered. I have been able to make it works with a patch, but I don't really like it:

			(function () {
				"use strict";
				window.addEventListener("resize", onResize);
				function onResize() {
					var listViews = document.querySelectorAll(".win-listview");
					for (var i = 0; i < listViews.length; i++) {
						var listView = listViews[i];
						listView.winControl.forceLayout();
					}
				}
			})();

Is there anything I'm doing wrong as my ListViews are not rendered, so I could remove my patch? The main issue with this patch is performance since it's regenerated even when it doesn't need to.

Answer 1

Try this:

@media screen and (-ms-view-state: snapped) {
.fullscreenOnly { display: none; }
.snappedOnly { display: inline; }
}

@media screen and (-ms-view-state: fullscreen-landscape) {
.snappedOnly  { display: none; }
.fullscreenOnly{ display: inline; }
}

---

Jeff Sanders (MSFT)

Answer 2

It doesn't works. The problem is with the not displayed listview, not the displayed one. So changing to display : inline doesn't help.

Answer 3

I will modify the sample and see what I can discover!

---

Jeff Sanders (MSFT)

Answer 4

Any news?

Answer 5

I think I have identified the problem; It is the 'display: none' attribute.

This is from the remarks section in the ListView.forceLayout method documentation: 

When you set the style.display property of a ListView or its parent elements to "none", the app discards layout information about those elements. When you change the value of the display property back to a style that makes everything visible again, the app will layout all the elements, but the ListView won't receive information about the current layout and will have an invalid layout. You can fix the issue by calling this function when you make the ListView visible again.

This was a found at http://msdn.microsoft.com/en-us/library/windows/apps/hh758352.aspx

Answer 6

Hi In,

Sorry this slipped under the radar for some reason.  Aratys has part of the solution.  Once it has been initialized if the data does not change you do not have to do the forceLayout.  If the data can change (your data source is not static) then you do have to call forceLayout.  Which brings the second issue, how to detect snapped view change?

You can register for the resize event and check to see if the viewstate has changed.  This has a sample of the technique toward the bottom of the article: http://msdn.microsoft.com/en-us/library/windows/apps/jj150600.aspx (see: Use JavaScript to process window resize events, if necessary).

Why are you displaying a different grid in Snapped view?  Can't you use the same view and apply the styling you need with media selectors?  This would be by far the best way to do this.

-Jeff

---

Jeff Sanders (MSFT)