Lisview ytyling issue - gaps appear between <LI> when using template

[Lee]

I originally had a listview with a hard coded list and the layout was fine.  I changed it to use a datasource and template instead and now gaps appear between the list items.  Can anyone suggest why this is and how to remove these?

original code which displays no gaps:

    <div data-role="view" data-title=" Control Panel - Mobile" id="listmessages" data-init="listMessagesInit">

        <h2>Customer Messages</h2>

        <p><?php echo $unread_messages . ' - unread messages'; ?></p> <a data-align="right" data-role="button" id="markasread">Mark as read</a><a data-align="right" data-role="button" id="delete">Delete</a>

        <ul id="message_list">

        <li class="isnew_1" id="890"><a href="/messages/view/890">

       <div style="float:left; width:150px; height: 50px">customer name<br />date</div>

       <div style="height: 50px"id="message_#= id #">customer name</div>

   </a></li><li class="isnew_0" id="234"><a href="/messages/view/#= id #">

       <div style="float:left; width:150px; height: 50px">customer name<br />date</div>

       <div style="height: 50px"id="message_#= id #">customer name</div>

   </a></li><li class="isnew_0" id="456"><a href="/messages/view/#= id #">

       <div style="float:left; width:150px; height: 50px">customer name<br />date</div>

       <div style="height: 50px"id="message_234">customer name</div>

   </a></li>

        </ul>

    </div>

 

<script>

 

     function listMessagesInit(){

         $("#message_list").kendoMobileListView({

              style: "inset",

          });

     }

    </script>

amended code which displays gaps:

<div data-role="view" data-title="Control Panel - Mobile" id="listmessages" data-init="listMessagesInit">

        <h2>Customer Messages</h2>

        <p><?php echo $unread_messages . ' - unread messages'; ?></p> <a data-align="right" data-role="button" id="markasread">Mark as read</a><a data-align="right" data-role="button" id="delete">Delete</a>

        <ul id="message_list"></ul>

    </div>

 

   <script id="message_list_template" type="text/x-kendo-template">

<li class="isnew_#= isnew #" id="#= id #"><a href="/messages/view/#= id #">

       <div style="float:left; width:150px; height: 50px">#= customer_name #<br />#= created #</div>

       <div style="height: 50px"id="message_#= id #">#= message #</div>

   </a></li>

</script>  

 

 function listMessagesInit(){

 

        var messageDataSource = new kendo.data.DataSource({

            

            transport: {

                read: "/messages/data",

                dataType: "json",

            schema: {

              model: {

                  id: "id",

                  fields: {

                      created: { type: "string" },

                      message: { type: "string" },

                      customer_name: { type: "string" },       

                      isnew: { type: "string" }

                     }

                      

                 }

             },

                  

           });

 

          $("#message_list").kendoMobileListView({

              dataSource: messageDataSource,

              //pullToRefresh: true,

              //appendOnRefresh: true,

              style: "inset",

              template: $("#message_list_template").text()

          });

 }

If I change the li's to divs this works layout wise but then the links within the divs will not work as remote view navigation.  Please advise..

[Dimo]

Hello Lee,

Generally, gaps between HTML elements can be caused by

+ margin / padding styles
+ whitespace in the rendered HTML markup, but only between inline or inline-block elements. Try removing the whitespace inside the template - before the opening <li> tag and after the closing </li> tag.

All the best,
Dimo
the Telerik team

[Lee]

Yep I had already tested those points before posting this issue but I have double checked this to confirm...

I have no extra styling added and so it should  be using the default css.  Just to ensure, I have set everything to margin:0; padding:0 but still get the gaps.  I have also removed all white space from everything within the 

<script>

tags and still have gaps.

If I add an extra list item in the template to test if that the gap appears within the template list items,it does appear between the first two list items, the gaps only appear on the repeated list items from the datasource.  It looks as though a gap is added above each datasource item.

code is:

<script id="message_list_template" type="text/x-kendo-template"><li  id="#= id #"><a href="/messages/view/#= id #"><div style="float:left; width:150px; height: 50px">#= customer_name #<br />#= created #</div><div style="height: 50px"id="message_#= id #">#= message #</div></a></li><li>TEST</li></script>

A screen shot of the issue is attached.

[Dimo]

Hi Lee,

Actually, the problem is that you have <li> tags in the template. They are created automatically by the ListView widget, so you should not include them again, as this creates duplicate empty list items and as a result - gaps.

http://demos.kendoui.com/mobile/listview/templates.html

Greetings,
Dimo
the Telerik team

[Lee]

Yeah this sorts out the gap issues, however,  I need to add an ID and class to the li's. I had tried the using div's instead of li's and this worked but as mentioned in the original posting the remote navigation will not work with the link being within a DIV. Any ideas how to get round this? 

Many thanks for you help with this.

[Dimo]

Hello Lee,

I suspect the problem is caused by invalid HTML that is currently used in the template - putting block elements such as <div>s inside inline elements such as <a>s is not allowed.

Regards,
Dimo
the Telerik team