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

6 posts, 1 answers
  1. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 30 Apr 2012 Link to this post

    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..
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 01 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 01 May 2012 Link to this post

    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.
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 01 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 01 May 2012 Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 02 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready