locked
break-inside causes -ms-grid-column width problems RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    I have a layout (-ms-grid) with four columns. The columns expand horizontally. Inside each column there are content blocks and I want to avoid a column break inside the content blocks.

    When I use 'break-inside: avoid-column' I get overflow in one column and too much unoccupied space in others (empty columns). When the break-inside property is removed, everything looks good.

    What is causing it, and how can it be fixed?

    Below is the HTML, CSS and JS to replicate the problem.

    The problem can be best seen with the simulator and its default resolution.

    Here is the HTML:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetailPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/itemDetail/itemDetail.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="content" aria-label="Main content" role="main">
            <div id="other-container" class="article"></div>
            <div id="blog-container" class="article"></div>            
            <div id="text-container" class="article"></div>
            <div id="another-container" class="article"></div>
        </div>
    </div>

     <!-- Blog template -->
    <div id="blogTemplate" data-win-control="WinJS.Binding.Template">
        <div class="blogContent">
            <header>
                <h2 class="item-title" data-win-bind="textContent: title"></h2>
            </header>
            <div class="item-content" data-win-bind="textContent: content"></div>
        </div>
    </div>

    <!-- Other template -->
    <div id="otherTemplate" data-win-control="WinJS.Binding.Template">
        <div class="blogContent">
            <header>
                <h3 class="item-title" data-win-bind="textContent: title"></h3>
                <h4 class="item-description" data-win-bind="textContent: description"></h4>
            </header>
            <div class="item-content" data-win-bind="textContent: content"></div>
        </div>
    </div>

    <!-- Text template -->
    <div id="textTemplate" data-win-control="WinJS.Binding.Template">
        <div class="textContent">
            <header>
                <h2 class="item-title">MIN TITTEL: <span data-win-bind="textContent: title"></span></h2>
            </header>
            <div class="item-description" data-win-bind="textContent: description"></div>
        </div>
    </div>
</body>
</html>

    Here is the CSS:

    .itemdetailpage .content {
    -ms-grid-row: 2;
    display: -ms-grid;
    height: 100%;
    overflow-x: auto;
    
    width: 100%;
    
    -ms-grid-rows: 1fr;
}

    .article {
        /* Define a multi-column, horizontally scrolling article by default. */
        column-fill: auto;
        column-gap: 80px;
        column-width: 480px;
        height: calc(100% - 75px);
        margin-
        margin-
    }

#other-container {
    -ms-grid-column: 1;
}

#blog-container {
    -ms-grid-column: 2;
}

#text-container {
    -ms-grid-column: 3;
}

#another-container {
    -ms-grid-column: 4;
}

.blogContent {
    break-inside: avoid-column;
}

    Here is the JS:
    It gets sample data from data.js which is found in the VS12 metro app templates.

    (function () {
    "use strict";

    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    ui.Pages.define("/pages/itemDetail/itemDetail.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
            element.querySelector(".titlearea .pagetitle").textContent = item.group.title;

            var renderTarget = document.getElementById("blog-container");
            for (var i = 0; i < 12; i++) {
                blogTemplate.winControl.render(item, renderTarget);
            }

            var renderTarget = document.getElementById("other-container");
            for (var i = 0; i < 11; i++) {
                otherTemplate.winControl.render(item, renderTarget);
            }

            var renderTarget = document.getElementById("text-container");
            for (var i = 0; i < 11; i++) {
                textTemplate.winControl.render(item, renderTarget);
            }

            var renderTarget = document.getElementById("another-container");
            for (var i = 0; i < 19; i++) {
                blogTemplate.winControl.render(item, renderTarget);
            }

            element.querySelector(".content").focus();
        }
    });
})();


    • Edited by Aratys Sunday, July 8, 2012 3:14 PM Clarifying where sample data can be found.
    Sunday, July 8, 2012 2:14 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi

    break-inside should only be used in multi-column layout. Using it in other kinds of layouts (such as grid layout) either have no effect, or may even break the layout.

    Also remove other multi-column specific properties, such as column-fill, column-gap, and column-width. Do not mix multi column layout with grid layout. 
     

    • Proposed as answer by Dino He Friday, July 13, 2012 9:01 AM
    • Edited by Dino He Friday, July 13, 2012 9:07 AM fix some typo
    • Marked as answer by Aratys Friday, July 13, 2012 9:57 AM
    Friday, July 13, 2012 9:01 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi

    Can you also paste your Data.js here?
    I use the 2012RC splitapp's Data.js, it's not fit your project.

    Thanks

    Tuesday, July 10, 2012 9:23 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    I used the Grid App template in VS12RC when creating this problem.

    Here is the data.js from my project:

    (function () {
    "use strict";

    var groupDescription = "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante";
    var itemDescription = "Item Description: Pellentesque porta mauris quis interdum vehicula urna sapien ultrices velit nec venenatis dui odio in augue cras posuere enim a cursus convallis neque turpis malesuada erat ut adipiscing neque tortor ac erat";
    var itemContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper rhoncus pharetra. Duis scelerisque risus ultrices nunc malesuada in facilisis nunc semper. Aenean mollis nisl tempus tortor vehicula quis vehicula tellus consectetur. Fusce non leo elit. Donec nec dignissim urna. Proin risus odio, interdum nec aliquet sed, vestibulum nec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae."
    // These three strings encode placeholder images. You will want to set the
    // backgroundImage property in your real data to be URLs to images.
    var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
    var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";
    var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";

    // Each of these sample groups must have a unique key to be displayed
    // separately.
    var sampleGroups = [
        { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
        { key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },
        { key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },
        { key: "group4", title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },
        { key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
        { key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
    ];

    // Each of these sample items should have a reference to a particular
    // group.
    var sampleItems = [
        { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

        { group: sampleGroups[1], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[1], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[1], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray },

        { group: sampleGroups[2], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[2], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[2], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[2], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[2], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[2], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

        { group: sampleGroups[3], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[3], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[3], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[3], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[3], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[3], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: lightGray },

        { group: sampleGroups[4], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[4], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[4], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[4], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

        { group: sampleGroups[5], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[5], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[5], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[5], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[5], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[5], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[5], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[5], title: "Item Title: 8", subtitle: "Item Subtitle: 8", description: itemDescription, content: itemContent, backgroundImage: lightGray }
    ];

    // Get a reference for an item, using the group key and item title as a
    // unique reference to the item that can be easily serialized.
    function getItemReference(item) {
        return [item.group.key, item.title];
    }

    function resolveGroupReference(key) {
        for (var i = 0; i < groupedItems.groups.length; i++) {
            if (groupedItems.groups.getAt(i).key === key) {
                return groupedItems.groups.getAt(i);
            }
        }
    }

    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }

    // This function returns a WinJS.Binding.List containing only the items
    // that belong to the provided group.
    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    // TODO: Replace the data with your real data.
    // You can add data from asynchronous sources whenever it becomes available.
    sampleItems.forEach(function (item) {
        list.push(item);
    });

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });
})();


    • Edited by Aratys Tuesday, July 10, 2012 12:21 PM Stated which initial app template I used in VS12RC.
    Tuesday, July 10, 2012 12:12 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi

    break-inside should only be used in multi-column layout. Using it in other kinds of layouts (such as grid layout) either have no effect, or may even break the layout.

    Also remove other multi-column specific properties, such as column-fill, column-gap, and column-width. Do not mix multi column layout with grid layout. 
     

    • Proposed as answer by Dino He Friday, July 13, 2012 9:01 AM
    • Edited by Dino He Friday, July 13, 2012 9:07 AM fix some typo
    • Marked as answer by Aratys Friday, July 13, 2012 9:57 AM
    Friday, July 13, 2012 9:01 AM