vertical align view

Thread is closed for posting
9 posts, 0 answers
  1. M Kumar
    M Kumar avatar
    40 posts
    Member since:
    Apr 2008

    Posted 09 Apr 2013 Link to this post

    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>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 11 Apr 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 10 Oct 2014 Link to this post

    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
  5. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 10 Oct 2014 in reply to Brandon Peterson Link to this post

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

    http://jsbin.com/digekevezicu/1/edit
  6. Brian
    Brian avatar
    6 posts
    Member since:
    Aug 2014

    Posted 27 Mar 2015 Link to this post

    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
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 31 Mar 2015 Link to this post

    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!
     
  8. Brian
    Brian avatar
    6 posts
    Member since:
    Aug 2014

    Posted 31 Mar 2015 in reply to Alexander Valchev Link to this post

    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
  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Apr 2015 Link to this post

    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!
     
  10. Brian
    Brian avatar
    6 posts
    Member since:
    Aug 2014

    Posted 02 Apr 2015 in reply to Petyo Link to this post

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