locked
Not able to set background of container of multi column (using column-width) article

    Question

  • Hi,

    I am trying to set background of container having a multi-column article.

    Basically, I have a listview on left and a multi-column article on right (similar to split view).

    I am trying to set the article flow as horizontal (multi columns using column-width css property).

    But when I set the background of the article it set it till the view port edge only.

    Here is sample code:

    Create new project with Split App template and replace the following HTML with the current HTML (inside body tag) in split.html:

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-info">
                <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
                <h4 class="item-description" data-win-bind="textContent: description"></h4>
            </div>
        </div>

        <!-- The content that will be loaded and displayed. -->
        <div class="my-page 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="my-list-section" aria-label="List column">
                <div class="my-list" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', tapBehavior: 'toggleSelect' }"></div>
            </div>
            <div class="article-section" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
                <div class="text">
                    <div class="title win-type-ellipsis" data-win-bind="textContent: title"></div>
                </div>
        
                <div class='article'>
                    <img class="article-image" src="#" data-win-bind="src: imageUrl; alt: title" />
                    <div class="article-content" data-win-bind="innerHTML: content"></div>
                </div>
            </div>
        </div>


    Replace the content of split.css file with following content:

    .my-page {
        -ms-grid-columns: 456px 1fr;
        display: -ms-grid;
        width: 100%;
        overflow-x:auto;
    }
    .my-page .my-list-section {
        -ms-grid-row: 2;
        margin-left: 106px;
        margin-right:10px;
    }
    .my-page .my-list-section .my-list .win-item {
        height:120px;
    }
    .my-page .article-section {
        -ms-grid-column: 2;
        display:-ms-grid;
        -ms-grid-rows:80px 1fr;
        -ms-grid-row: 2;
        margin-left: 0px;
        height: 600px;
        width:auto;
    
        background-color:rgba(254, 247, 235, 0.6);
        padding:30px 50px 25px 50px;
    }
    .my-page .article-section .article {
        -ms-grid-row:2;
        display:-ms-grid;
        -ms-grid-columns:auto auto;
    }
    .my-page .article-section .title {
        -ms-grid-row:1;
        margin-bottom:-5px;
        font-size:37px;
        color:#333333;
    }
    .my-page .article-section .article .article-image {
        -ms-grid-row:2;
        -ms-grid-column:1;
        margin-right:30px;
    }
    .my-page .article-section .article-content {
        -ms-grid-row:2;
        -ms-grid-column:2;
    
        column-fill: auto;
        column-gap: 30px;
        column-width: 270px;
        height:550px;
        width:auto;
    }

    Run the app and click on any tile on hub to see split.html.

    Scroll to right, notice the background color article is not proper.

    Thanks & Regards,

    Gurpreet Singh

    Monday, September 03, 2012 6:46 PM

All replies

  • I cannot run the split app with these modifications.

    You are missing the js file perhaps?

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, September 04, 2012 7:51 PM
    Moderator
  • Sorry for that, here is the JS file.

    (function () {
        "use strict";
    
        var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
        var binding = WinJS.Binding;
        var nav = WinJS.Navigation;
        var ui = WinJS.UI;
        var utils = WinJS.Utilities;
    
        ui.Pages.define("/pages/split/split.html", {
    
            /// <field type="WinJS.Binding.List" />
            _items: null,
            _group: null,
            _itemSelectionIndex: -1,
    
            // 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 listView = element.querySelector(".my-list").winControl;
    
                // Store information about the group and selection that this page will
                // display.
                this._group = (options && options.groupKey) ? Data.resolveGroupReference(options.groupKey) : Data.groups.getAt(0);
                this._items = Data.getItemsFromGroup(this._group);
                this._itemSelectionIndex = (options && "selectedIndex" in options) ? options.selectedIndex : -1;
    
                element.querySelector("header[role=banner] .pagetitle").textContent = this._group.title;
    
                // Set up the ListView.
                listView.itemDataSource = this._items.dataSource;
                listView.itemTemplate = element.querySelector(".itemtemplate");
                listView.onselectionchanged = this._selectionChanged.bind(this);
                listView.layout = new ui.ListLayout();
    
                this._updateVisibility();
                if (this._isSingleColumn()) {
                    if (this._itemSelectionIndex >= 0) {
                        // For single-column detail view, load the article.
                        binding.processAll(element.querySelector(".article-section"), this._items.getAt(this._itemSelectionIndex));
                    }
                } else {
                    if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                        // Clean up the backstack to handle a user snapping, navigating
                        // away, unsnapping, and then returning to this page.
                        nav.history.backStack.pop();
                    }
                    // If this page has a selectionIndex, make that selection
                    // appear in the ListView.
                    listView.selection.set(Math.max(this._itemSelectionIndex, 0));
                }
            },
    
            unload: function () {
                this._items.dispose();
            },
    
            // This function updates the page layout in response to viewState changes.
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />
    
                var listView = element.querySelector(".my-list").winControl;
                var firstVisible = listView.indexOfFirstVisible;
                this._updateVisibility();
    
                var handler = function (e) {
                    listView.removeEventListener("contentanimating", handler, false);
                    e.preventDefault();
                }
    
                if (this._isSingleColumn()) {
                    listView.selection.clear();
                    if (this._itemSelectionIndex >= 0) {
                        // If the app has snapped into a single-column detail view,
                        // add the single-column list view to the backstack.
                        nav.history.current.state = {
                            groupKey: this._group.key,
                            selectedIndex: this._itemSelectionIndex
                        };
                        nav.history.backStack.push({
                            location: "/pages/split/split.html",
                            state: { groupKey: this._group.key }
                        });
                        element.querySelector(".article-section").focus();
                    } else {
                        listView.addEventListener("contentanimating", handler, false);
                        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                            listView.indexOfFirstVisible = firstVisible;
                        }
                        listView.forceLayout();
                    }
                } else {
                    // If the app has unsnapped into the two-column view, remove any
                    // splitPage instances that got added to the backstack.
                    if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                        nav.history.backStack.pop();
                    }
                    if (viewState !== lastViewState) {
                        listView.addEventListener("contentanimating", handler, false);
                        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                            listView.indexOfFirstVisible = firstVisible;
                        }
                        listView.forceLayout();
                    }
    
                    listView.selection.set(this._itemSelectionIndex >= 0 ? this._itemSelectionIndex : Math.max(firstVisible, 0));
                }
            },
    
            // This function checks if the list and details columns should be displayed
            // on separate pages instead of side-by-side.
            _isSingleColumn: function () {
                var viewState = Windows.UI.ViewManagement.ApplicationView.value;
                return (viewState === appViewState.snapped || viewState === appViewState.fullScreenPortrait);
            },
    
            _selectionChanged: function (args) {
                var listView = document.body.querySelector(".my-list").winControl;
                var details;
                // By default, the selection is restriced to a single item.
                listView.selection.getItems().done(function updateDetails(items) {
                    if (items.length > 0) {
                        this._itemSelectionIndex = items[0].index;
                        if (this._isSingleColumn()) {
                            // If snapped or portrait, navigate to a new page containing the
                            // selected item's details.
                            nav.navigate("/pages/split/split.html", { groupKey: this._group.key, selectedIndex: this._itemSelectionIndex });
                        } else {
                            // If fullscreen or filled, update the details column with new data.
                            details = document.querySelector(".article-section");
                            binding.processAll(details, items[0].data);
                            details.scrollTop = 0;
                        }
                    }
                }.bind(this));
            },
    
            // This function toggles visibility of the two columns based on the current
            // view state and item selection.
            _updateVisibility: function () {
                var oldPrimary = document.querySelector(".primarycolumn");
                if (oldPrimary) {
                    utils.removeClass(oldPrimary, "primarycolumn");
                }
                if (this._isSingleColumn()) {
                    if (this._itemSelectionIndex >= 0) {
                        utils.addClass(document.querySelector(".article-section"), "primarycolumn");
                        document.querySelector(".article-section").focus();
                    } else {
                        utils.addClass(document.querySelector(".my-list-section"), "primarycolumn");
                        document.querySelector(".my-list").focus();
                    }
                } else {
                    document.querySelector(".my-list").focus();
                }
            }
        });
    })();
    

    Wednesday, September 05, 2012 4:58 AM