vertical align view

[M Kumar]

how to vertically align middle the view

<div data-role="view" id="loginPage"  data-title="Header"   >
            <header data-role="header"  >
                <div  data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>

Align me vertically and horizontally

            <div data-role="footer" align="center"  style="padding-top:10px;padding-bottom:10px;background:#617B9D;color:white;"   >
                Footer
            </div>
        </div>

[Alexander Valchev]

Hello Kumar,

To achieve that, please make the View stretched so its child contents will be stretched to occupy the entire content area. Then wrap the text inside div element and apply the following styles to it:

#outer {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

For your convenience I prepared a small example: http://jsbin.com/enihik/2/edit

Regards,
Alexander Valchev
the Telerik team

[Brandon Peterson]

Unfortunately Alexander's suggestion does not work for Firefox and IE but a slight alteration using table display css instead of -webkit-box will handle non-webkit browsers:

.full-height { height: 100%;  display: table }
.middle-align { display: table-cell; vertical-align: middle; text-align: center }

<div id="foo" data-role="view" data-title="My View" data-stretch="true">
    <header data-role="header"  >
        <div  data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </header>
    <div class="full-height">
        <div class="middle-align">
        <p>Align me vertically and horizontally</p>
        </div>
    </div>
    <div data-role="footer" align="center"  style="padding-top:10px;padding-bottom:10px;background:#617B9D;color:white;">
        Footer
    </div>
</div>

I edited the example: http://jsbin.com/enihik/38/edit

[Brandon Peterson]

jsbin link above is not reflecting changes. Here it is:

http://jsbin.com/digekevezicu/1/edit

[Brian]

Neither of the solutions posted work with the kendo version I am using (Q3 2014), at least not in chrome or when running on the iPad in Safari.

Can anyone tell me how to do this on an iPad - nothing seems to work!?

Thanks,

Brian

[Alexander Valchev]

Hello Brian,

Could you please create a small but runnable example which demonstrates your current implementation so I can examine it and assist you further?

Regards,
Alexander Valchev
Telerik

 

 

[Brian]

Hi Alexander,

I have attached a sample that uses the second method listed - although neither method works for me.  I couldn't include the kendo libs in the sample as the file was too big, but I am using the Q3 2014 libraries.

In my case the view is inside a SplitView pane, not sure if that makes any difference.

Thanks,

Brian

[Petyo]

Hello,

please check a modified version of your example which uses the approach Alexander outlined. It should work if you test it in Chrome. 

Regards,
Petyo
Telerik

 

 

[Brian]

Hi Petyo,

I don't know what I was doing when I tested this method before, but it does work in Chrome, and in Safari on the iPad. :)

Thanks,

Brian