locked
Column width does not stretch to dynamically added content, resulting in overlapping content.

    Question

  • I have a four column layout. The first two columns have fixed width (250 px). In both column three and four there is a flexbox that is filled with content dynamically.

    The problem is that column three and four will not be larger than 660 px, even though the flexbox content exceeds this width. This results in content from column three overlapping the content in column four.

    Is there a way to make column three and four to have the same width as the flexboxes?

    Below is the HTML, JS and CSS I used.
    To reproduce the problem; Create a blank Windows Metro style app and replace the content of the default.html, default.js and default.css with the HTML, JS and CSS from below, respectively.

    CSS:

    .itemdetailpage .content {
        -ms-grid-row: 2;
        height: 100%;
        overflow-x: auto;
        position: relative;
        width: 100%;
        z-index: 0;
        display:-ms-grid;
        -ms-grid-columns: 250px 250px auto auto;
    }
    
    #col1 {
        -ms-grid-column: 1;
    }
    #col2 {
        -ms-grid-column: 2;
    }
    #col3 {
        -ms-grid-column: 3;
    }
    #col4 {
        -ms-grid-column: 4;
    }
    
    .myFlexContent{
    	display: -ms-inline-flexbox;
    	-ms-flex-flow: column wrap;
        
        width: 100%;
        height: 550px;
    }
    
    .contentBlock {
        width: 220px;
    }
    
    
    /*
     * Below is the default CSS from the itemDetails page in the VS Grid App template.
     */
    
    html {
        cursor: default;
    }
    
    #contenthost {
        height: 100%;
        width: 100%;
    }
    
    .fragment {
        /* Define a grid with rows for a banner and a body */
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 128px 1fr 0px;
        display: -ms-grid;
        height: 100%;
        width: 100%;
    }
    
        .fragment header[role=banner] {
            /* Define a grid with columns for the back button and page title. */
            -ms-grid-columns: 120px 1fr;
            -ms-grid-rows: 1fr;
            display: -ms-grid;
        }
    
            .fragment header[role=banner] .win-backbutton {
                margin-left: 39px;
                margin-top: 59px;
            }
    
            .fragment header[role=banner] .titlearea {
                -ms-grid-column: 2;
                margin-top: 37px;
            }
    
                .fragment header[role=banner] .titlearea .pagetitle {
                    width: calc(100% - 20px);
                }
    
        .fragment section[role=main] {
            -ms-grid-row: 2;
            height: 100%;
            width: 100%;
        }

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>My Page</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" />
        <script src="/js/data.js"></script>
        <script src="/js/default.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">My header</span>
                </h1>
            </header>
            <div class="content" aria-label="Main content" role="main">
                <div id="col1">
                    <header><h2>Column 1</h2></header>
                    <div>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec adipiscing erat. Maecenas at pellentesque velit. Ut sem turpis, mollis eu convallis et, tempor non tortor. Morbi accumsan metus sit amet lacus aliquam pellentesque. Etiam mattis lobortis orci sit amet rutrum. Nulla ac nibh eros. Sed placerat tellus eu ante fermentum sollicitudin. Fusce mauris justo, ullamcorper in rutrum at, tristique non dui. Proin ultricies molestie lectus id sagittis.
                    </div>
                </div>
                <div id="col2">
                    <header><h2>Column 2</h2></header>
                    <div>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec adipiscing erat. Maecenas at pellentesque velit. Ut sem turpis, mollis eu convallis et, tempor non tortor. Morbi accumsan metus sit amet lacus aliquam pellentesque. Etiam mattis lobortis orci sit amet rutrum. Nulla ac nibh eros. Sed placerat tellus eu ante fermentum sollicitudin. Fusce mauris justo, ullamcorper in rutrum at, tristique non dui. Proin ultricies molestie lectus id sagittis.
                    </div>
                </div>
                <div id="col3">
                    <div id="myContent" class="myFlexContent"></div>
                </div>  
                <div id="col4">
                    <div id="myContent2" class="myFlexContent"></div>
                </div>           
            </div>
        </div>
    
        <!-- Template for content blocks inside the flexboxes -->
        <div id="myTemplate" data-win-control="WinJS.Binding.Template">
            <div class="contentBlock">
                <header>
                    <h2 data-win-bind="textContent: title"></h2>
                </header>
                <div data-win-bind="textContent: content"></div>
            </div>
        </div>
    
    </body>
    </html>

    JS:

    (function () {
        "use strict";
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        WinJS.UI.Pages.define("/default.html", {
    
            ready: function (element, options) {
    
                var contentItem = {
                    title: "",
                    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue dui vel ipsum malesuada tincidunt. Suspendisse et velit est, vitae auctor tellus. Vestibulum nec viverra diam. Proin at lectus sit amet nisi porttitor pellentesque. Vestibulum sagittis laoreet tellus sed gravida."
                };
    
                // Render content into the flexbox container in column 3.
                var renderTarget = document.getElementById("myContent");
                for (var i = 0; i < 26; i++) {
                    contentItem.title = "My title " + i;
                    myTemplate.winControl.render(contentItem, renderTarget);
                }
    
                contentItem = {
                    title: "",
                    content: "Nulla quis nisi dolor, non condimentum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Vivamus ut justo nisl, vitae viverra lorem. Aenean pulvinar, est id placerat mollis, odio dui aliquam nisi, quis facilisis enim turpis eget eros."
                };
    
                // Render content into the flexbox container in column 4.
                var renderTarget = document.getElementById("myContent2");
                for (var i = 0; i < 26; i++) {
                    contentItem.title = "My other title " + i;
                    myTemplate.winControl.render(contentItem, renderTarget);
                }
    
                element.querySelector(".content").focus();
            }
        });
    
        app.start();
    })();

    • Edited by Aratys Thursday, July 19, 2012 6:28 AM Simplified how to reproduce the problem.
    Monday, July 16, 2012 10:30 AM

All replies

  • Your code does not build.  I tried to fix it up but I don't have time to debug the issue thoroughly at this point.

    Can you repro with a simple blank application or better yet just right in IE 10?  I think this is simply a style issue and has nothing to do with Metro style app development.

    What are you trying to accomplish specifically?  There may be a better way to accomplish what you are trying to do.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, July 18, 2012 7:26 PM
    Moderator
  • Thanks for your response.
    I have simplified how to reproduce the problem; Create a blank Windows Metro style app and replace the content of the default.html, default.js and default.css with the HTML, JS and CSS code from above, respectively. The code will build and run.

    What I am trying to accomplish:
    In the content area I want to have a grid layout with four columns. The first two columns will have a fixed width, say 250 px. The next two columns (column three and four) will have a flexbox in each of them. The content of the flexboxes are dynamically created, so the width of them are unknown. 
    The problem is when I define the grid with "-ms-grid-columns: 250px 250px auto auto;" it seems the "auto" property is not generating the correct width. Resulting in overlapping content between column three and four. 

    Here is a picture to visualize how I want the layout to look like:

    Four column layout. 

     
    • Edited by Aratys Thursday, July 19, 2012 7:18 AM Fixed typos.
    Thursday, July 19, 2012 7:16 AM
  • This really is not a Metro style app issue but a question of css styles.  Flexible Box layout will calculate to fill in the available size so I am not sure that is what you want here.  Have you investigated the multi-column layout?  That seems more like what you are trying to achieve: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_multi-column.htm

    -Jeff


    Jeff Sanders (MSFT)

    Friday, July 20, 2012 1:45 PM
    Moderator
  • The issue is that column three does not expand properly to fit all the content from the flexbox.

    With the columns defined as "-ms-grid-columns: 250px 250px auto auto;" I expect that column three will grow to fit the content inside it, since the third column width is set to "auto".

    Friday, July 20, 2012 2:04 PM
  • Correct, but the size of the scrollable div you are in does not expand.  Make sense?

    Jeff Sanders (MSFT)

    Wednesday, July 25, 2012 2:28 PM
    Moderator
  • Hm, I cant make much sense of it.

    Do you mean that the .content element does not expand? Or that each auto property will only go up to: screenWidth - 250px - 250px?

    If it is the latter case, could one say that writing "-ms-grid-columns: 250px 250px auto auto;" would be translated to "-ms-grid-columns:250px 250px (screenWidth - 250 - 250) (screenWidth - 250 - 250);"?


    • Edited by Aratys Wednesday, July 25, 2012 2:53 PM Fixed small mistake.
    Wednesday, July 25, 2012 2:50 PM
  • I think you need a better understanding of flex box.

    Flex box will expand only to the point where it will fit into the available space.  If you want to use Flex box, you should have a static definition of the space of the parent you are using (therefore using flex box in a grid will not give you what you want).  If you want to simply fill all the space you can use something like table.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, July 25, 2012 6:36 PM
    Moderator