HTML Content instead of images

10 posts, 1 answers
  1. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 04 Apr 2012 Link to this post

    Kendo,

    I am testing out the mobile on safari and emulating the user agent for iOS and trying to produce some functionality with the ScrollView widget.

    I want to display some static HTML (like a box the size of the metro panel box) instead of images and I am having issues getting the scrolling to work. 

    I only want to display 1 page at a time no matter the size of the device used, when I use the sample code to test out it does not seem to render the pages like it does on the demo page.

    Any ideas? A simple sample would be much appreciated.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Apr 2012 Link to this post

    Hello,

    The scrollview should work with any content. In fact, in our demos it works with div elements styled with background-image.

    As for pages, you should apply data-role="page" (see docs) to each element that you want to be displayed as a page.

    If you still have difficulties making this run, can you please open a support ticket with a sample project? We will do our best to help.

    Greetings,
    Petyo
    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. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 05 Apr 2012 Link to this post

    Ok I fixed the visual issue it was simple a css rule that was incorrectly being applied. My issue now is that the pager seems to always display +1 pages than there are actually are.

    Attached is the same css/html I am using. It is showing 4 page dots instead of 3.
    Attached is a screenshot displaying what I am seeing as well.
  5. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 06 Apr 2012 Link to this post

    Hello Josh,

    The issue is caused by the display: inline-block your contents have. Since inline-block is part of the flow, whitespace between the blocks is rendered as such, which leads to gaps between them. The easiest way to fix this is to remove any whitespace between your .snapshot DIVs, like this:
    <div class="snapshot" data-role="page">
        <div class="name">Practice 1</div>
        <div class="details">
            <div>Net Collections:</div>
            <div>99%</div>
        </div>
    </div><div class="snapshot" data-role="page">
        <div class="name">Practice 2</div>
        <div class="details">
            <div>Net Collections:</div>
            <div>85%</div>
        </div>
    </div><div class="snapshot" data-role="page"></div>


    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Florian
    Florian avatar
    9 posts
    Member since:
    Jun 2012

    Posted 11 Apr 2012 Link to this post

    Hey Kamen,
    is the "easiest way" to fix the +1page the only one or is there any other or best practise?
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 12 Apr 2012 Link to this post

    Hi Florian,

    The most easiest is also the most clean way to do this - the rest involve using javascript to remove the white-space or using CSS to collapse the white-space somehow (CSS3 white-space-collapse property is not supported in any browser).

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 19 Apr 2012 Link to this post

    When databinding (in my case using a foreach within asp.net mvc 4) this is an issue as I cannot remove the whitespace on output.

    My css solution that seems to work: (my environment is ASP.NET MVC 4 beta)

    Add a margin left to all the pages except the first one (tested in safari emulating iphone).
    This would of course probably have to be adjusted for your scenario and HTML content...

     .snapshot + .snapshot { margin-left-4px;}
    


    my markup:
    <div data-role="scrollview">
                @foreach (var item in Model.PracticeOverViews)
                { 
                    <text>
                        <div class="snapshot" data-role="page">
                            HTML HERE
                        </div>
                    </text>
                }
            </div>
  9. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 05 Jul 2012 Link to this post

    NICE.... I too am using MVC4 with Kendo UI mobile... so removing the whitespace also would not work for me... but Josh Lipford'ssolution worked beautifully for me... at least in the emulator... time to push to web to test on actual mobile devices... Thanks!
  10. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 17 Oct 2012 Link to this post

    Hi,
           I just wanted to say that I am using Kendo templateing and I had this problem too, I tried Josh Lipford's solution and it worked a treat, thanks Josh :-). I then got looking at my template in light of what Kamen had said about whitespace. It was looking like this to start with.

    <script type="text/x-kendo-template" id="svpage">
         <div data-role="page" >
                <ul data-role="listview" data-style="inset">
                    <li>First Name: #= FirstName #</li>
                    <li>Surname: #= LastName #</li>
                    <li><input type="button" value="Click ME !" onclick="alert('#= LastName #');" /></li>
                </ul>
            </div>
    </script>

    I began to wonder if it was only the whitespace at the begining and end, I REALLY did not want to have a one line template!! So I went ahead and changed it to this:

    <script type="text/x-kendo-template" id="svpage"><div data-role="page" >
                <ul data-role="listview" data-style="inset">
                    <li>First Name: #= FirstName #</li>
                    <li>Surname: #= LastName #</li>
                    <li><input type="button" value="Click ME !" onclick="alert('#= LastName #');" /></li>
                </ul>
            </div></script>

    This has the result that when the templates are rendered there is no whitespace between them (it only seems to be an issue with whitespace between the page divs and not in the page's content). I confirmed this by removing all css classes and the pager still showed the correct number of pages.

    I'm not sure if this could be applied to MVC or not but it should help those of us using the Kendo templateing engine

    Hope this helps someone out there. I think if this is to be an ongoing issue the scrollview demo text and documentation should be updated to mention the whitespace issue as it was driving me barmy for quite a while, when a simple one line in the api docs and demo text would have prevented it.

    Chris
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 22 Oct 2012 Link to this post

    Hello Chris,

    Thank you for sharing this. Indeed this is a good solution and I added it to the docs.
    As a small sign of our appreciation for your effort I updated your Telerik points.

    Kind regards,
    Alexander Valchev
    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