Embeding scrollable objects into DIV

[Radoslav]

Hi,
I tried to embed pdf, web site or even html text into DIV with exact size (eg. 300x400px), and I have few problems on iOS7 (probably on Android, too)
1. I can see only part of the first page of PDF, but cannot scroll it, zoom etc
2. I cannot scroll web site too (all of these - iframe, embed or object are not working good)
3. If I put larger html text into small DIV I cannot scroll it (down/up)
Could you help me,
Txanks
Radoslav

[Zdravko]

Hello Radoslav,

Thanks for your feedback.
I will pass through your points as follow:
1. So far the only reliable way to open pdf files is via InAppBrowser plugin. It loads the pdf in a separate view where you can scroll and zoom it. Here is a sample app. You can also use the InAppBrowser for remote web sites and so on.

2. Even though we don't encourage using iframe because of numerous issue (which can be found on the web) you still can use it to represent a web site.

<div style="overflow: auto; -webkit-overflow-scrolling: touch;height:450px;" id="my">
        <iframe src="http://en.wikipedia.org/wiki/Main_Page" style="overflow: auto; -webkit-overflow-scrolling: touch;" align="middle" scrolling="yes" width="100%" height="100%"> </iframe>
    </div>

Notice that there are some additional styling attributes in order to support scrolling in iOS device.

3. If you are using Kendo UI view, you will have to use scroller widget in order to provide scrolling to your div as in the code below:

<div data-role="view" data-title="Contacts" data-layout="main">
    <div data-role="scroller" style="height:150px;overflow: scroll;">
        ... some long text here
    </div>
</div>

You can also use native scrolling, but notice that it has a few limitations that you may want to consider.

If you need any further assistance, please open a private ticket and provide there a code snippet representing the issue or a sample project so we could investigate the cause and help further.

Regards,
Zdravko
Telerik