locked
Flipview weirdness - crazy DIV tag RRS feed

  • Question

  • I have a flipview but having some weirdness with inline CSS that's messing up.

    In DOM Explorer I see this 

    div style="left: 685500px; width: 1371px; height: 400px; overflow: hidden; ;">

    just above my win-item class.  What is that?  No idea what it means but 400px height is killing me!

    My 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">
                <h4 class="item-title" data-win-bind="textContent: title"> </h4>
            </div>
        </div>

        <!-- The content that will be loaded and displayed. -->
        <div class="flipViewPage 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>
            <section aria-label="Main content" role="main">
                <div id="reviewFilpView" class="itemslist" aria-label="List of this group's items" data-win-control="WinJS.UI.FlipView" data-win-options="{ selectionMode: 'none' }"></div>
            </section>
        </div>

    Thanks

    Paul

    Thursday, July 25, 2013 6:00 PM

Answers

  • The FlipView creates various intermediate divs between the root element where you specify it and the child elements where copies of the template get created. 400px is simply the default height for the win-flipview class, so that trickles down to these intermediaries.

    You can just style the flipview's height. In your case, something like this in CSS will style the one control:

    #reviewFilpView {
        height: 800px;
    }

    Do this and you'll see that those intermediate divs are all 800px now.

    The crazy left value, by the way, is how the FlipView places its items offscreen until needed.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Also see second edition preview



    Friday, July 26, 2013 4:18 PM