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

[Antonio]

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

[Petyo]

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

[Luke]

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.

[Petyo]

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