This is a migrated thread and some comments may be shown as answers.

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

3 Answers 128 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Antonio
Top achievements
Rank 1
Antonio asked on 23 Nov 2012, 02:44 PM
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

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 26 Nov 2012, 08:51 AM
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!
0
Luke
Top achievements
Rank 1
answered on 01 Dec 2012, 08:36 PM
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.

0
Petyo
Telerik team
answered on 03 Dec 2012, 02:03 PM
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!
Tags
ScrollView (Mobile)
Asked by
Antonio
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Luke
Top achievements
Rank 1
Share this question
or