HTML Content instead of images

[Josh]

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.

[Petyo]

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

[Josh]

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.

[Kamen Bundev]

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

[Florian]

Hey Kamen,
is the "easiest way" to fix the +1page the only one or is there any other or best practise?

[Kamen Bundev]

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

[Josh]

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>

[Scott]

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!

[Chris]

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

[Alexander Valchev]

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