Has anyone been able to center the DIV content within ScrollView?

4 posts, 0 answers
  1. Antonio
    Antonio avatar
    15 posts
    Member since:
    Oct 2012

    Posted 23 Nov 2012 Link to this post

    Hi,

    I have a scrollView with HTML DIVs  as its contents. I am having difficulty centering the DIV content. It is fine when I am just using plain images, but once I start using DIVs, then everything gets aligned to the left.

    Also, I couldn't get each item closer to each other.

    Here's how the code looks like. Can somebody help me on this please? Many thanks in advance!


    <!--Scrollview container-->      
            <div id="scrollview-container">
                <div data-role="scrollview" id="scrollview" data-page="1">
                                    
                    <div data-role="page">
                        <!--What is your nickname-->
                        <div id="YourNickname">
                        <div class="picture_box">
                            <img src="images/conversation/yournickname2.png" class="shareble_image" />
                                <div class="social">
                                    <div class="shareit"><img src="images/conversation/shareIt.png" /></div>
                                    <div class="facebook"><a href="#"><img src="images/conversation/facebook.png" /></a></div>
                                    <div class="tweet"><a href="#"><img src="images/conversation/tweet.png" /></a></div>
                                    <div class="instragram"><a href="#"><img src="images/conversation/instragram.png" /></a></div>
                                    <div class="download"><a href="#"><img src="images/conversation/download.png" /></a></div>
                                </div>
                         </div>
                         </div> 
                    </div><div data-role="page">
                        <!--Most Embarrassing girl moment-->
                        <div id="GirlMoment">
                        <div class="picture_box">
                            <img src="images/conversation/girl-moment2.png" class="shareble_image" />
                                <div class="social">
                                    <div class="shareit"><img src="images/conversation/shareIt.png" /></div>
                                    <div class="facebook"><a href="#"><img src="images/conversation/facebook.png" /></a></div>
                                    <div class="tweet"><a href="#"><img src="images/conversation/tweet.png" /></a></div>
                                    <div class="instragram"><a href="#"><img src="images/conversation/instragram.png" /></a></div>
                                    <div class="download"><a href="#"><img src="images/conversation/download.png" /></a></div>
                                </div>
                         </div> 
                         </div>
                    </div>


                </div>
            </div>
            <!--END: Scrollview container-->




    Regards,
    Antonio
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 26 Nov 2012 Link to this post

    Hello Antonio,

    The data-role=page items are automatically stretched to fill the width of the viewport. You may use an additional element to center it inside - see this example for what I mean. 

    All the best,
    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. Luke
    Luke avatar
    2 posts
    Member since:
    Jan 2012

    Posted 01 Dec 2012 Link to this post

    Hello Petyo,

    your example (http://jsfiddle.net/underlog/a9wqL/7/) demonstrates very well my question :  why is the pager in the scrollview = number of pages + 1 ?  The last one allways being empty in my trials ?

    Thx for helping.

  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 03 Dec 2012 Link to this post

    Hi Luc,

    The problem is due to whitespace being significant for inline elements. Trimming the whitespace removes the bogus page - see this version.

    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!
Back to Top
Kendo UI is VS 2017 Ready