Embeding scrollable objects into DIV

2 posts, 0 answers
  1. Radoslav
    Radoslav avatar
    1 posts
    Member since:
    Aug 2014

    Posted 13 Aug 2014 Link to this post

    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,
  2. Zdravko
    Zdravko avatar
    657 posts

    Posted 15 Aug 2014 Link to this post

    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>

    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

    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.


    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

Back to Top