CODEWITHSUNDEEP
htmlcsswindows-8microsoft-metrowinjs
Akil Pandu
Akil Pandu

Reputation: 567

How to arrange listviews in vertical colums in MetroApps using HTML5,WinJS?

I have a Metro application which contains 2 listviews with some list items. These 2 list views are by default coming one below the other, every time when I add one more listview to my page all are displaying one below the other. The problem is I don't want to display those listviews horizontally. I want them to be displayed side by side. So, can anyone help me in how to arrange listviews side by side which will have look of Metro apps.

Thank you.

Upvotes: 1

Views: 823

Answers (1)

Jeff Brand
Jeff Brand

Reputation: 5633

CSS

.ms-grid
{
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 1fr 1fr;
}

HTML

<div class="ms-grid">
    <div data-win-control="WinJS.UI.ListView"></div>
    <div data-win-control="WinJS.UI.ListView" style="-ms-grid-column: 2;"></div>
</div>

Upvotes: 1

Related Questions