locked
How to style items in flipview template?

    Question

  •  I've created a template function to show items in flipview. I want to style items inside this flipview, but unable to do so. How do I do that? I'm following all details in quickstart example and download sample. My code is as follows:  HTML part

     <div id="mainContent" aria-label="Main content" role="main">
               <!-- <article>-->
                                   <div id="basicFlipView" class="flipview" data-win-control="WinJS.UI.FlipView"
                          data-win-options="{itemDataSource:Data.items.dataSource}" ></div>
                    
               <!-- </article>-->
    </div>

    JS part:

    ready: function (element, options) {
                var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
                number = Data.mylist.indexOf(item);
               
                var renderingFv = document.querySelector("#basicFlipView").winControl;
               renderingFv.itemTemplate = simpleFvRenderer;
               renderingFv.forceLayout();
               renderingFv.currentPage = number;
    }
    function simpleFvRenderer(itemPromise) {
            return itemPromise.then(function (item) {
                //root element for the item:
                
                var element = document.createElement("div");
                element.class = "fvTemplateRoot";
                var div1 = document.createElement("div");
                div1.class = "fvTemplateDiv";
                var image1 = document.createElement("img");
                image1.class = "fvTemplateImage";
                image1.src = item.data.backgroundImage;
                div1.appendChild(image1);
                element.appendChild(div1);
                var div2 = document.createElement("div");
                div2.class = "fvTemplateDiv"; // onediv";
                div2.innerHTML = item.data.title;
                element.appendChild(div2);
                return element;
            });
        }

    CSS part:

    #mainContent {
    	display: -ms-grid;
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 1fr;
    	-ms-grid-row: 2;
    }
    .flipview {
    	width: 1050px;
    	height: 600px;
    	}
    	
    .fvTemplateRoot {
        width: 900px;
        text-align: center; /*center them*/
        white-space: nowrap; /*make sure they're all on the same line*/
    }
    .fvTemplateDiv {
        width: 200px;
        height: 350px;
        border: 3px solid red;
        display: inline-block; //want to create two horizontal div inside main div
    }
    .fvTemplateImage {
        height: 270px;
        width: 380px;
        display: inline-block;  //Want to create two horizontal div inside main div
    }


      In Blend, unable to add any class to the div's inside flipview. Every option for divs inside template is disbled in blend. Why?
    • Edited by SonalMac Tuesday, May 21, 2013 1:17 AM
    Monday, May 20, 2013 7:31 PM

Answers

  • Ok,

    I removed your files and removed the references also from the project.

    Here is the issue, The Templating function , where you added the class was not assigning the class to the elements because of which the CSS was not able to figure out on what to apply the styles.

    Here is the modified code. BTW you should always use WinJS.Utilities to do this kind of operation.

    function simpleFvRenderer(itemPromise) {
            return itemPromise.then(function (item) {
                //root element for the item:
                
                var element = document.createElement("div");
                WinJS.Utilities.addClass(element, "fvTemplateRoot");
                //element.class = "flipview";
                var div1 = document.createElement("div");
                WinJS.Utilities.addClass(div1, "fvTemplateDiv");
                var image1 = document.createElement("img");
                WinJS.Utilities.addClass(image1, "fvTemplateImage");
                image1.src = item.data.backgroundImage;
                div1.appendChild(image1);
                element.appendChild(div1);
                var div2 = document.createElement("div");
                WinJS.Utilities.addClass(div2, "fvTemplateDiv");
                div2.innerHTML = item.data.title;
                element.appendChild(div2);
                return element;
            });

    - Girija

    • Marked as answer by SonalMac Wednesday, May 22, 2013 6:16 AM
    Tuesday, May 21, 2013 11:18 PM

All replies

  • I am not sure what you mean by style doesnot apply. Can you please elaborate which style does not apply ?

    BTW one mistake in your CSS is this :

    .flipview {
    	width: 1050px;
    	height: 600px;
    	}
    

    Should be  :

    #basicFlipView {
    	width: 1050px;
    	height: 600px;
    	}
    

    Because : You do not have any div with class name "flipview".

    Please elaborate to help us help you.

    - Girija

    Monday, May 20, 2013 9:07 PM
  •     Yes, Girija, Plesase see this statement :

    <div id="basicFlipView" class="flipview">

    So basicFlipView has class flipview. None of the style applies. My flipview is of given width and hieht (1050px and 600px). This style applies. I tried to change this height and width. But, other elements inside the template does not change according to given styles. All I see is image from the datasource covering the entire flipview. Even that image is so large, only part of it can be shown inside the flipview. So that's what about "no styles are applying"

    Monday, May 20, 2013 9:19 PM
  • OOPS .. My bad :( Missed it.

    It should work ... Just as a check ? Have you added the CSS in the HTML file in the header ?

    <head>
    < link rel="stylesheet" type="text/css" href="%relative path of CSS%">
    < /head>

    Can you also try putting something like this for all item classes :

    .flipview .fvTemplateRoot {

    and so on...

    - Girija

    Monday, May 20, 2013 10:05 PM
  •   Yes, css file is included in html doc. Nothing works. I tried to add .flipview .fvTemplateRoot and

    .itemDetailsPage. .flipview .fvTemplateRoot and everything........ Wasting time since last week...

    Does it has to do anything with default.css???

    Monday, May 20, 2013 10:36 PM
  • Hi,

    I do not think it has to do with default.css .

    Can you post a code that is reproducible with some sample data ?

    - Girija

    Tuesday, May 21, 2013 4:02 AM
  •   How about if I share the project on skydrive?

    Tuesday, May 21, 2013 5:06 AM
  • Sure please do that.

    - Girija

    Tuesday, May 21, 2013 6:14 PM
  •       I've uploaded zip file to skydrive:  https://skydrive.live.com/redir?resid=F4CAEFCD620982EB!318&authkey=!ANeKLN0ODlFcXnw

    Thanks for looking.


    I've deleted number of images to reduce size of the folder. So you may see some errors, but they are just absent images. Otherwise, it would work.
    • Edited by SonalMac Tuesday, May 21, 2013 8:32 PM
    Tuesday, May 21, 2013 8:14 PM
  • I am getting lot of errors trying to build the sample. Below is the screenshot for the errors.

    Please make sure that the application runs .

    - Girija

    Tuesday, May 21, 2013 9:25 PM
  •  Yes, I mentioned that before. They are images only. I think project should run fine without images.
    Tuesday, May 21, 2013 9:58 PM
  • It doesnot work.. The build fails. I gave the screenshot for the errors.

    When you remove the files, remove them from VS solution and not manually from file explorer. If you remove from file explorer, the references should remain in project file and the project will throw error while build.

    - Girija


    Tuesday, May 21, 2013 10:46 PM
  • Ok,

    I removed your files and removed the references also from the project.

    Here is the issue, The Templating function , where you added the class was not assigning the class to the elements because of which the CSS was not able to figure out on what to apply the styles.

    Here is the modified code. BTW you should always use WinJS.Utilities to do this kind of operation.

    function simpleFvRenderer(itemPromise) {
            return itemPromise.then(function (item) {
                //root element for the item:
                
                var element = document.createElement("div");
                WinJS.Utilities.addClass(element, "fvTemplateRoot");
                //element.class = "flipview";
                var div1 = document.createElement("div");
                WinJS.Utilities.addClass(div1, "fvTemplateDiv");
                var image1 = document.createElement("img");
                WinJS.Utilities.addClass(image1, "fvTemplateImage");
                image1.src = item.data.backgroundImage;
                div1.appendChild(image1);
                element.appendChild(div1);
                var div2 = document.createElement("div");
                WinJS.Utilities.addClass(div2, "fvTemplateDiv");
                div2.innerHTML = item.data.title;
                element.appendChild(div2);
                return element;
            });

    - Girija

    • Marked as answer by SonalMac Wednesday, May 22, 2013 6:16 AM
    Tuesday, May 21, 2013 11:18 PM
  •   Thanks a lot, Girija. That seems like working. Just curious, why did "element.class="classname" did not work and WinJS.Utilities.addClass worked?  I'm trying to get used to WinJS.Utilities, any how..

    And thanks for info about how to remove files.. That's new to me too...Will keep in mind.

    Wednesday, May 22, 2013 6:16 AM