Template issue "white space issue"

6 posts, 0 answers
  1. Bo
    Bo avatar
    5 posts
    Member since:
    May 2011

    Posted 13 Aug 2013 Link to this post

    I try to create a RSS reader (atom format). I read the feed from a blogspot.com site. 
    I bind the datasource to a ListView and use a template to format the result. But issue is I get a white space on the top of my header. See attachment.
    Everything is working running in the simulator it's only an issue on the device.

    What is wrong?

    Here is my code:
    Index.html:
    <body>
            <div data-role="view" id="tabstrip-home" data-title="Nyheder" data-model="viewModel" data-layout="tabstrip-layout" >
                <div data-role="content" class="weather">
                <ul id="news" data-role="listview" data-template="newsItems" data-style="inset" data-bind="source: dataSource"  class="inboxList">
                </ul>
                </div>
            </div>

             <scripts id="newsItems" type="text/x-kendo-template">
                <a  href="\\#newsDetails?newsID=#= Id#">
                    <h3 class="time">Udgivet #: publishedDate#</h3>
                    <h3>Af #: author #</h3>
                    <h2>#: title#</h2>
                </a>
            </scripts>
       

            <div id="newsDetails" data-role="view" data-show="onViewShow" data-model="viewModel"  data-title="Nyheder!" >
                <ul id="info" data-role="listview" data-style="inset">
                    <li>
                        <span data-bind="html: selectedNews.content"></span>
                        <br>
                        <hr>
                        <h5>
                            Skrevet af:
                            <div data-bind="text: selectedNews.author"/>
                        </h5>
                        <h5>
                            Skrevet den:
                            <div data-bind="text: selectedNews.publishedDate"/>
                        </h5>
                        <a data-role="backbutton">Tilbage</a>
                    </li>
                </ul>
            </div>

            <script id="row-template" type="text/x-kendo-template">
                <tr>
                    <td data-bind="html: selectedNews.content">
                    </td>
                    <td >

                    </td>
                    <td data-bind="selectedNews.publishedDate"></td>

                </tr>
            </script>
     
       
            <!--Layout-->
            <div data-role="layout" data-id="tabstrip-layout" >

                <!--Header-->
                <div data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </div>

                <!--Footer-->
               
            </div>
        </body>

    RSSFeed.js:
    viewModel = kendo.observable({
        dataSource : new kendo.data.DataSource({
    transport:{
    read:{
    url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://feeds.feedburner.com/VenstreIEgedal'),
    dataType: "json"
    },
            parameterMap: function(options, operation){
                if(operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
    },
    schema:{
    model:{
                id: "Id",
    fields:{
    Id: {type:"int"},      
    title:{type:"string"}
    }
    },
                             
    data: function(response) {
    var articleLength = response.responseData.feed.entries.length;
    articleLength = (articleLength > 20) ? 20 : articleLength;
    for (var i = 1; i <= articleLength ; i++) {
    var entry = response.responseData.feed.entries[i - 1];
    var entrydate=new Date(entry.publishedDate) //get date of entry
                    var entrydatestr=entrydate.getDate()+"-"+(entrydate.getMonth()+1) +"-"+entrydate.getFullYear();
                    newsData.push({Id: i, title: entry.title, content: entry.content, author: entry.author, publishedDate: entrydatestr});
    }
                
    //return response.responseData.feed.entries;
    return newsData
    }
    }
    }),
       
        });

    function onViewShow(e){
        var newsId = e.view.params.newsID,
        dataitem = viewModel.dataSource.get(newsId);
        
        viewModel.set("selectedNews",dataitem);
        
        
        
    }
    var newsData = []

  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 15 Aug 2013 Link to this post

    Hello Bo,

    You're using an older version of Kendo UI, after upgrading your project to v. 2013.2.729 I no longer observe the white space in your project (see attached image). Please note that I have also disabled your custom styles to make sure they do not get in the way.

    Regards,
    Steve
    Telerik

    Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Bo
    Bo avatar
    5 posts
    Member since:
    May 2011

    Posted 15 Aug 2013 Link to this post

    Hi Steve

    Im all ready using the latest version of Kendo UI. (i think)
    Have you tried to run it on a iphone device and not in the simulator?
  4. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 15 Aug 2013 Link to this post

    Hello Bo,

    The version of Kendo UI in your project was Q1 2013 (not latest). The attached screenshot from my previous reply is from iPhone 3GS v.6.1.3.

    Regards,
    Steve
    Telerik

    Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  5. Bo
    Bo avatar
    5 posts
    Member since:
    May 2011

    Posted 15 Aug 2013 Link to this post

    Okay. Thanks Steve. Im pretty new to this.
    How can you see the Kendo UI version? And how to upgrade to the latest version?

    And Thanks again.
  6. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 15 Aug 2013 Link to this post

    Hello Bo,

    Opening any of the Kendo UI files would contain the version in the top comments. If you have subscription for Kendo UI, you can download the Q2 version from their site and upgrade the Kendo UI files in your project. If you don't have subscription, you can create a new Icenium project, choose the Kendo UI Mobile template, copy the kendo folder, go back to the app dashboard, open your project and paste the kendo folder, choosing to replace existing files.

    Regards,
    Steve
    Telerik

    Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top