Make ModalView appear on the center of the screen

2 posts, 0 answers
  1. avatech
    avatech avatar
    1 posts
    Member since:
    Nov 2013

    Posted 17 Jan 2014 Link to this post

    Hi I'm a newbie in Kendo UI Mobile, I wanted to know how to make a modalview appear on the center of the screen, just like the one in the demo ( I've been trying to manipulate the CSS but still can't find the easy way to do it.

    Another question is also what is the best way to center all the contents in the ModalView?

    By the way here's my code, which as you can see the ModalView appears on the top left of the screen instead of in the middle:
    01.<!DOCTYPE html>
    04.    <title>Social Leaderboard</title>
    05.    <link rel="stylesheet" type="text/css" href="">
    06.    <link rel="stylesheet" type="text/css" href="">
    07.    <link rel="stylesheet" type="text/css" href="">
    09.    <script src="" type="application/javascript"></script>
    10.    <script src="" type="application/javascript"></script>
    12.    <script>
    13.        this.application = new;
    15.        $(document).ready(function Start(){
    16.            $("#view-modal").data("kendoMobileModalView").open();
    17.        });
    18.    </script>
    21.    <div data-role="view" data-title="Modal Test" id="view-modaltest">
    22.        <header data-role="header">
    23.            <div data-role="navbar">
    24.                <a data-role="button" data-align="left" id="btnBack">Back</a>
    25.                <span data-role="view-title">Leaderboard</span>
    26.            </div>
    27.            <ul data-role="buttongroup" data-index="0" data-select="OnSelectTimeFrame">
    28.                <li>All-Time</li>
    29.                <li>Monthly</li>
    30.                <li>Weekly</li>
    31.            </ul>
    32.        </header>
    33.        <footer data-role="footer">
    34.            <div data-role="tabstrip" class="tabstrip" data-select="OnSelectLeaderboard">
    35.                <a data-icon="globe">Global</a>
    36.                <a data-icon="contacts">Friends</a>
    37.            </div>
    38.        </footer>
    39.    </div>
    41.    <div data-role="modalview" id="view-modal" style="width: 300px; height: 240px;">
    42.        <header data-role="header">
    43.            <div data-role="navbar">
    44.                <span>Challenge Friend</span>
    45.            </div>
    46.        </header>
    47.        <div>
    49.            <span> X </span>
    51.        </div>
    52.        <div>
    53.            <a data-role="button" id="btnOKChallenge">OK</a>
    54.            <a data-role="button" id="btnCancelChallenge">Cancel</a>
    55.        </div>
    56.    </div>
    Thanks heaps!

  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 20 Jan 2014 Link to this post

    Hi Dede,

    There was a bug in the Q3 release that made the ModalView cover the whole screen, instead of sit in the center as it should. Please upgrade to the service pack that was released last week and the issue will go away.

    Kamen Bundev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top