locked
Implement a inline scrollviewer in Windows Store app with HTML5/JS RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    I am developing a Windows 8 Store app with html5/JS, a reading app. The content page looks like :

    And I'm using CSS-Grid-Layout to manage the page layout like this:

    <body>
    <div class="contentPagepage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton black-button" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
            <h2>
                <span class=""></span>
            </h2>
        </header>
        <div class="content clearfix" aria-label="Main content">
            <div id="leftContainer">
                <p>Left container</p>
            </div>

            <section id="rightContainer">
                <div id="navContainer">
                    <button type="button">button 1</button>
                    <button type="button">button 2</button>
                    <button type="button">button 3</button>
                </div>
                <!--<article>-->
                    <div id="contentContainer" class="item-content" aria-label="Main content">
                    html content 
                    </div>
            </section>

        </div>

    </div>
</body>

    And the css file is:

    .contentPagepage, .black-button {
    background-color: #EEEEEE;
    color: black;
}

.clear{ clear: both; }
.clearfix:after{ 
content:"."; display:block; height:0; clear:both; 
 
font-size: 0;
}

*html .clearfix{ 
 height:1%; 
}

*+html .clearfix{ 
 height:1%; 
}

.contentPagepage .content {
    -ms-grid-row-span: 2;
    display: -ms-grid;
    -ms-grid-columns: 40% 60%;
    height: calc(100% - 183px);
    margin: 133px 120px 0 120px;
    border: 1px solid #000;
}

#leftContainer {
    height: calc(100% - 183px);
    -ms-grid-column: 1;
    background-color: greenyellow;
    margin: 0 10px 10px 0;
}

#rightContainer{
    -ms-grid-column: 2;
    display: -ms-grid;
    -ms-grid-rows: 30px auto;
}

#navContainer {
    -ms-grid-row: 1;
}

#contentContainer {
    -ms-grid-row: 2;
    overflow-y: auto;
    height: calc(100% - 0px);
}

.contentPagepage .content #contentContainer {
    -ms-grid-row: 2;
    height: auto;
    background-color: red;
    display: block;
    overflow-y: auto;
}

    Now the layout system works fine, but the content area got fixed too, this means if I use the "lement.querySelector(".content .item-content").innerHTML = item.content;" to load some html content, there is no scrollbar even the conent's height is larger than the container.

    So, how can I fix this problem?


    Wednesday, January 2, 2013 5:59 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote 
    .contentPagepage .content #contentContainer {
    -ms-grid-row: 2;
    height: XXXpx;
    background-color: red;
    display: block;
    overflow-y: auto;
}
    Your CSS rule for the #contentContainer must have a fixed Height (instead of "auto") for the overflow-y scroll bar to kick in, otherwise, its setting the height to the content height. Try setting the "height" to some fixed value in pixels or try the same height as the other area (calc(100%-183px)).

    • Marked as answer by Song Tian Tuesday, January 8, 2013 9:07 AM
    Wednesday, January 2, 2013 7:09 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    you can style the div which you showing the html content as..

    overflow-y:scroll;

    it will show a scroll bar automatically when the content over flowed in y direction

    Wednesday, January 2, 2013 6:42 AM
  • Question
    Sign in to vote
    0
    Sign in to vote 
    .contentPagepage .content #contentContainer {
    -ms-grid-row: 2;
    height: XXXpx;
    background-color: red;
    display: block;
    overflow-y: auto;
}
    Your CSS rule for the #contentContainer must have a fixed Height (instead of "auto") for the overflow-y scroll bar to kick in, otherwise, its setting the height to the content height. Try setting the "height" to some fixed value in pixels or try the same height as the other area (calc(100%-183px)).

    • Marked as answer by Song Tian Tuesday, January 8, 2013 9:07 AM
    Wednesday, January 2, 2013 7:09 PM