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

vertical align view

8 Answers 304 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
M Kumar
Top achievements
Rank 1
Veteran
M Kumar asked on 09 Apr 2013, 08:41 AM
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>

8 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Apr 2013, 08:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brandon Peterson
Top achievements
Rank 2
answered on 11 Oct 2014, 12:48 AM
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
0
Brandon Peterson
Top achievements
Rank 2
answered on 11 Oct 2014, 01:06 AM
jsbin link above is not reflecting changes. Here it is:

http://jsbin.com/digekevezicu/1/edit
0
Brian
Top achievements
Rank 1
answered on 27 Mar 2015, 11:37 AM
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
0
Alexander Valchev
Telerik team
answered on 31 Mar 2015, 06:41 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brian
Top achievements
Rank 1
answered on 31 Mar 2015, 08:44 AM
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
0
Petyo
Telerik team
answered on 02 Apr 2015, 10:35 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brian
Top achievements
Rank 1
answered on 02 Apr 2015, 11:14 AM
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
Tags
General Discussions
Asked by
M Kumar
Top achievements
Rank 1
Veteran
Answers by
Alexander Valchev
Telerik team
Brandon Peterson
Top achievements
Rank 2
Brian
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or