How to add vertical scrolling to Windows 8 app in snapped view


Tags: javascript,html,css,microsoft-metro,vertical-scrolling

Problem :

I'm working on a Windows 8 app in Html, CSS and JavaScript. In snapped view will some screens not be able to see the whole content, and that's why I want a vertical scrolling.

How can I fix that? I would like to have it in html or CSS.

HTML:

<section aria-label="Main content" role="main">
        <div class="divContainer" style="width: auto; height: auto; overflow:auto; display: -ms-grid; 
            -ms-grid-columns: 450px 50px 450px 46px 250px; 
            -ms-grid-rows: auto">
            <div id="pageCalc">
                <h2>User information</h2>
                ... 
                Some text here
                ...
            </div>
            <div id="pageText">
                <h2>Contact information</h2>
                ...
                Some text here
                ...
                <img id="imageDiv" src="/images/aboutlogo.png" border="0" alt="">


            </div>
            <div id="pageAdd">
                ...
                An add here
                ...
            </div>
        </div>
    </section>

The #pageText, #pageAdd and #pageCalc's Width, height and stuff like that is definated in the css, and then in snapped view, it uses this piece of code:

CSS:

@media screen and (-ms-view-state: snapped) {
.about section[role=main] {
    margin-left: 20px;
    margin-right: 20px;
}

.divContainer {
    height:1080px;
    width: 230px;
    display:-ms-grid;
    -ms-grid-column: 230px;
    -ms-grid-row: auto 20px auto 20px auto;
    overflow: auto;

}

#pageCalc, #pageText, #pageAdd {
    width: 230px;
}

#pageCalc {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

#pageText {
    -ms-grid-column: 1;
    -ms-grid-row: 3;
}

#pageAdd {
    -ms-grid-column: 1;
    -ms-grid-row: 5;
}

}



Solution :

Win8 apps in html, css and JavaScript are running on Microsoft WWA Host process. That is internet explorer-based rendering platform. So you make your application as you will make it on IE. Just wrap your snapped content into a div with fixed height and with overflow: auto and you will have a vertical scroll.


    CSS Howto..

    How to use @RenderPage to include CSS content inline - MVC Razor

    Show submit button as an image

    How to achieve Expand collapse Side Nav with icon using jquery and boostrap css

    How can I style a JavaFX SplitMenuButton in CSS

    Show hidden image with jQuery

    How to change a CSS property dynamically in Angular

    How to modify CSS when requirements change?

    How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?

    How to copy this semi-static menu?

    How to modify a CSS display property from JavaScript?

    How do I create a pattern overlay in CSS

    How to add new value to current css value [closed]

    How can I make images stack on top of each other as web page scales down?

    how to scale image according to image - css

    How can I get these Bootstrap column divs to be uniform length inside of a well?

    How can I show a element on my site when hovered with only JS?

    jQuery on click shows div but it flickers and disappears

    How should I handle this CSS Inheritance conundrum?

    How to set two directions for flex-box css?

    How to keep Div rotated with css after flip?

    how to style in css: product…(price)?

    Height isn't showing up full on everything except Chrome

    How to make a vertically extendable DIV box from this image?

    Cache policy, css/js/images how to make them not to load each time i do full postback?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to change H3 color in bootstrap using CSS file

    How to make the background color transparent

    How to get block to change width if text is longer then the width in a multilevel listless drop down navigation menu

    How to prevent Ajax overflow/server crash? (Arduino/ESP8266 Environment)

    How HTML Inheritance works with conflicting styles rules in CSS?