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:
Thanks heaps!
Dede
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>Dede
1 Answer, 1 is accepted
0
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
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!