locked
Define a multi-column, horizontally scrolling article Inside a hub Template

    Question

  • Hello,

    I am trying to define a multi-column, horizontally scrolling article Inside a hub Template. For exemple, if I take the hub Template available in VS2013 and change the first section (with the horizontal scrollbar), I get that :

    The html is simple, I have just added more data and an article element in the section1 of the hub control:

    <div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">
        <article>
            <img src="/images/gray.png" width="420" height="280" />
            <div class="subtext win-type-x-large" data-win-res="{ textContent: 'Section1Subtext' }"></div>
            <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
            <div class="win-type-small">
                <span data-win-res="{ textContent: 'Section1Description' }"></span>
                <span data-win-res="{ textContent: 'Section1Description' }"></span>
                <span data-win-res="{ textContent: 'Section1Description' }"></span>
                <span data-win-res="{ textContent: 'Section2Description' }"></span>
                <span data-win-res="{ textContent: 'Section2Description' }"></span>
                <span data-win-res="{ textContent: 'Section2Description' }"></span>
                <span data-win-res="{ textContent: 'Section2Description' }"></span>
                <span data-win-res="{ textContent: 'Section2Description' }"></span>
                <span data-win-res="{ textContent: 'Section2Description' }"></span>
            </div>
        </article>
    </div>

    In the CSS file I've only added a style for the article with a multi column layout:

    .hubpage .hub .section1 article {
        column-fill: auto;
        column-gap: 80px;
        column-width: 480px;
        height: calc(100% - 50px);
        margin-top: 5px;
        column-count: auto;
        display: block;
    }

    The problem is that I would like the width of container (the hub section) fits the width of the article (and remove the horizontal scollbar). In short, a auto width layout for the hub section.

    In the CSS of the Template we can find a style for the section:

    .hubpage .hub .section1 {
        width: 420px;
    }

    But changing the width property (auto, 100%, etc.) does not provide the expected result.

    Any idea ?

    Thanks.

    Wednesday, December 4, 2013 11:17 AM

Answers

  • Hi Florian,

    I don't believe there is a trivial way to do this. The auto width of the multi-column container will be the width of a column, not the width of the total columns. This is better for the scrolling scenario, but as you note you don't want to nest a horizontal scrolling view for the article inside the horizontal scrolling view for the hub.

    The typical design here would be to have the section scroll vertically, but for a small number of columns you could calculate and explicitly set the width.

    --Rob 

    Thursday, December 5, 2013 1:47 AM
    Owner