locked
Using FlipView inside a listview project RRS feed

  • Question

  •  

      I've created a project with listview. Generally, listview creates first page with groupdItems, second with groupDetails and third page with itemDetails. In my project all these works fine. Now, in itemDetails page I want to add a flipview effect, so a user can flip through items one by one, right from there. (They don't have to go to back each time to see the new item.) Is this possible?

        I tried to add a simple flipview in my itemDetails page. It shows the first item and a navigation button. When I click navigation button it shows the second item momentarily and switches back to first item. So am I doing it right? Or is it not possible?

    Tuesday, May 14, 2013 5:54 AM

Answers

  • The flip view size can be set in the CSS. If you have set the height and width correctly then you should get that working.

    For example if you add this style:

    <div id="flipView" 
        style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
        data-win-control="WinJS.UI.FlipView"
        data-win-options="{ 
           <Your options>
        }">
    </div> 

    I would suggest you have look at some samples here

    Information on styling the flip view is here

    If you need further please share your code (HTML, JS and CSS) and someone would be able to help you better.

    - Girija

    Wednesday, May 15, 2013 12:01 AM

All replies

  • Adding a flip view is very much possible. How is that you are implementing ?Please share a sample code.

    - Girija

    Tuesday, May 14, 2013 6:02 PM
  •   Hi Girija, Thanks for reply. I could add flip view and its working now. But now I'm having problem with its size. It just shows up like a small square. How can I make it as big as a screen?

    Tuesday, May 14, 2013 8:44 PM
  • The flip view size can be set in the CSS. If you have set the height and width correctly then you should get that working.

    For example if you add this style:

    <div id="flipView" 
        style="width: 480px; height: 310px; border: solid 1px black; margin: 40px"
        data-win-control="WinJS.UI.FlipView"
        data-win-options="{ 
           <Your options>
        }">
    </div> 

    I would suggest you have look at some samples here

    Information on styling the flip view is here

    If you need further please share your code (HTML, JS and CSS) and someone would be able to help you better.

    - Girija

    Wednesday, May 15, 2013 12:01 AM