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

Make ModalView appear on the center of the screen

1 Answer 53 Views
ModalView
This is a migrated thread and some comments may be shown as answers.
avatech
Top achievements
Rank 1
avatech asked on 18 Jan 2014, 05:20 AM
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 (demos.kendoui.com/mobile/modalview/index.html). 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>
02.<html>
03.<head>
04.    <title>Social Leaderboard</title>
05.    <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.common.min.css">
06.    <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.default.min.css">
07.    <link rel="stylesheet" type="text/css" href="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/styles/kendo.mobile.all.min.css">
08. 
09.    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="application/javascript"></script>
10.    <script src="https://da7xgjtj801h2.cloudfront.net/2013.3.1119/js/kendo.mobile.min.js" type="application/javascript"></script>
11. 
12.    <script>
13.        this.application = new kendo.mobile.Application(document.body);
14. 
15.        $(document).ready(function Start(){
16.            $("#view-modal").data("kendoMobileModalView").open();
17.        });
18.    </script>
19.</head>
20.<body>
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>
40. 
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>
57.</body>
58.</html>
Thanks heaps!

Dede

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 20 Jan 2014, 08:25 AM
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.

Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ModalView
Asked by
avatech
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or