FlipView layout bug when changing its size

Question

Hi all,

I have a div with two -ms-grid columns: "320px 1fr".

The first column contains a WinJS.UI.ListView with articles in it and the second column contains a WinJS.UI.FlipView which displays the currently selected article. Everything works just fine.

I have a button to toggle the ListView visibility, when the user taps on it, I change the -ms-grid configuration to "auto 1fr", give a style.opacity = "0" to the ListView and perform a forceLayout() on the FlipView, again everything's fine.
But when I toggle back to "320px 1fr" (style.opacity = "1" on the ListView + refresh the ListView by setting its itemDataSource + forceLayout() on the FlipView), the layout of the current article of the FlipView is missing ~100px on the ListView's side, the missing elements appear when you click on it but the global layout stays broken until you select another article (another FlipView page) and this particular page layout stays broken if you get back on it except if you switched enough pages to make the FlipView recycle it.

Here is a visual example of the bug:

Am I doing something wrong?

Thanks to anyone who could help!

Pierre

Answer 1

Hi Pierre,

Can you post a simple repro of this issue?  Perhaps on SkyDrive.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hi Jeff,

Thank you for your answer, unfortunately, I've tried to repro this in a simple app but couldn't ...

My code is quite complicated so it can come from anywhere ... :(

I could share my code with you in private if you have some time to look at it, just tell me your email address.

PS: I've found a workaround but it's really dirty, right after the call to forceLayout(), I do:

msSetImmediate(function () {
	// root div of each FlipView page
	var articleRoots = document.querySelectorAll('.articleItemTemplate');
	for (var i = 0; i < articleRoots.length; i++) {
		articleRoots[i].style.opacity = '0.99';
	}
	setTimeout(function () {
		// root div of each FlipView page
		var articleRoots = document.querySelectorAll('.articleItemTemplate');
		for (var i = 0; i < articleRoots.length; i++) {
			articleRoots[i].style.opacity = '1';
		}
	}, 1);
});

It forces a redraw of each page but it's not perfect, the white part of the page (in my screenshot above) causes a white flash: it disappears and reappears very quickly.

That code only forces the redraw of the page so I really think it's an internal bug of the FlipView which don't redraw the page to the good size before the app shows the result of the user's action... Don't you think?

Regards,

Pierre