Ever since I updated to Q1 release of kendo I can no longer style the modal view correctly. Right now I have my modal view html like this:
<div id="globalSaveModal" data-role="modalview" class="modalSave">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
and my CSS class like this:
.modalSave {
height: auto;
width: 100%;
position: fixed !important;
top: 0px;
left: 0px;
}
This worked before Q1 was released. Not only that, CSS styling are having weird effects. Fixed no longer works as Fixed should, it instead makes the modal view incredibly tiny and doesn't display any of the text part nor does it position it in a fixed way. It keeps it in the same spot as if it were still Relative.
Am I missing something with the modal view? I don't have trouble styling any of the other kendo widgets. Modalview is the only one that does not seem to behave correctly.
<div id="globalSaveModal" data-role="modalview" class="modalSave">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
and my CSS class like this:
.modalSave {
height: auto;
width: 100%;
position: fixed !important;
top: 0px;
left: 0px;
}
This worked before Q1 was released. Not only that, CSS styling are having weird effects. Fixed no longer works as Fixed should, it instead makes the modal view incredibly tiny and doesn't display any of the text part nor does it position it in a fixed way. It keeps it in the same spot as if it were still Relative.
Am I missing something with the modal view? I don't have trouble styling any of the other kendo widgets. Modalview is the only one that does not seem to behave correctly.
7 Answers, 1 is accepted
0
Mark
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2014, 03:40 PM
Some more information. My modalview code is in our default.aspx page. It is a generic page that holds lots of global elements, many which are modalViews. Not sure if this is relevant or not. Whenever there is a save,update,delete we have global modalviews that we enable from the current view.
0
Mark
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2014, 04:23 PM
This is the closest I could get to creating a small example. This doesn't effectively accomplish what mine is doing, but shows some of the weirdness. If I have var app = new kendo.mobile.Application(document.body); on the page it opens the modalView up correctly. BUT we initialize our kendo.mobile.Application in a javascript file that houses a lot of globally used stuff.
If I try initializing it directly using $("#globalSaveModal).kendoMobileModalView(); it opens it up, but does not have any of the styling applied. Why is this? This was a perfectly legitimate way to do it before 2014 Q1 release. I have noticed that the documentation for mobile has removed all code that initializes it this way, but yet the web widgets still use this style.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<body>
<div id="globalSaveModal" data-role="modalview" class="modalSave">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
<style scoped>
.modalSave {
height: auto;
width: 100% !important;
position: fixed !important;
top: 0px;
left: 0px;
background: white;
}
</style>
<script>
//$("#globalSaveModal).kendoMobileModalView();
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
If I try initializing it directly using $("#globalSaveModal).kendoMobileModalView(); it opens it up, but does not have any of the styling applied. Why is this? This was a perfectly legitimate way to do it before 2014 Q1 release. I have noticed that the documentation for mobile has removed all code that initializes it this way, but yet the web widgets still use this style.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<body>
<div id="globalSaveModal" data-role="modalview" class="modalSave">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
<style scoped>
.modalSave {
height: auto;
width: 100% !important;
position: fixed !important;
top: 0px;
left: 0px;
background: white;
}
</style>
<script>
//$("#globalSaveModal).kendoMobileModalView();
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
0
Mark
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2014, 04:57 PM
To add to my frustration I found this web page in Kendo's Getting Started section.
http://docs.telerik.com/kendo-ui/getting-started/mobile/modalview
It states "Important: As of Q3 2013 the ModalView supports autosizing when its content changes and when no height is set. Unfortunately we were able to implement this at the expense of the possibility to set the ModalView
size in a CSS stylesheet. As a workaround please use the ModalView width and height options or set them through inline CSS instead."
Why this is only located in the Getting Started section I don't know. Since this is a change from previous version, you would think it would be included in the API where developers who have been using kendo for a while can see it. I don't know about other people, but very rarely do I go to the Getting Started section when looking for kendo updates. I expect these types of things to be listed with the API documentation.
With that said I removed the CSS style from a separate sheet and did all the styling inline as shown below. Not luck at all. if I use height: auto, it does not show any of the message. If I leave height out, and let it auto height (what the getting started documentation says it does) it still does not show. Top and Left do not effect the placement at all.
<div id="globalSaveModal" data-role="modalview" style="width: 100% !important; height: 200px; position: fixed !important; top: 0px; left: 0px;">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
http://docs.telerik.com/kendo-ui/getting-started/mobile/modalview
It states "Important: As of Q3 2013 the ModalView supports autosizing when its content changes and when no height is set. Unfortunately we were able to implement this at the expense of the possibility to set the ModalView
size in a CSS stylesheet. As a workaround please use the ModalView width and height options or set them through inline CSS instead."
Why this is only located in the Getting Started section I don't know. Since this is a change from previous version, you would think it would be included in the API where developers who have been using kendo for a while can see it. I don't know about other people, but very rarely do I go to the Getting Started section when looking for kendo updates. I expect these types of things to be listed with the API documentation.
With that said I removed the CSS style from a separate sheet and did all the styling inline as shown below. Not luck at all. if I use height: auto, it does not show any of the message. If I leave height out, and let it auto height (what the getting started documentation says it does) it still does not show. Top and Left do not effect the placement at all.
<div id="globalSaveModal" data-role="modalview" style="width: 100% !important; height: 200px; position: fixed !important; top: 0px; left: 0px;">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
0
Mark
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2014, 05:19 PM
To add to my last post and the weirdness, I can get my modalView to sort of work properly if I BOTH set and inline style and a style in the CSS sheet..... If I remove parts of the inline or the style sheet it screws up. They both must be set. If min-height is removed from the inline style, then none of the message is shown.
I'm starting to think this has to be a bug with kendo's modalView. Why would an inline style and style class need to both be used to get semi correct results?
Another odd thing. I must set the class style height to auto, but must also then set the inline height to 100% in order for it to display somewhat properly?
Thanks for any help guys. I know you guys are working hard. I just hope I can figure out why the modalView acts so weird now.
.modalSave {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
}
<div id="globalSaveModal" data-role="modalview" class="modalSave" style="width: 100%; height: 100% !important; min-height: 9em; position: fixed; top: 0; left: 0;">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
I'm starting to think this has to be a bug with kendo's modalView. Why would an inline style and style class need to both be used to get semi correct results?
Another odd thing. I must set the class style height to auto, but must also then set the inline height to 100% in order for it to display somewhat properly?
Thanks for any help guys. I know you guys are working hard. I just hope I can figure out why the modalView acts so weird now.
.modalSave {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
}
<div id="globalSaveModal" data-role="modalview" class="modalSave" style="width: 100%; height: 100% !important; min-height: 9em; position: fixed; top: 0; left: 0;">
<div data-role="header">
<div data-role="navbar">
<span>Save</span>
</div>
</div>
<p id="globalSaveModalMessage" align="center">Save...</p>
</div>
0
Mark
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2014, 06:04 PM
Slowly making some progress. So I saw on another thread that a way to override modalView is to have a CSS class like this:
.km-modalview-root > div.k-animation-container {
position:absolute !important;
top:0px !important;
left:0px !important;
}
The problem is, this does it globally. I would think do something like this:
.km-modalview-root > div.k-animation-container .modalSave {
position:absolute !important;
top:0px !important;
left:0px !important;
}
But this doesnt apply at all even though I have a class="modalSave" included with the element?
.km-modalview-root > div.k-animation-container {
position:absolute !important;
top:0px !important;
left:0px !important;
}
The problem is, this does it globally. I would think do something like this:
.km-modalview-root > div.k-animation-container .modalSave {
position:absolute !important;
top:0px !important;
left:0px !important;
}
But this doesnt apply at all even though I have a class="modalSave" included with the element?
0
Hi Mark,
Actually it is much easier to show a ModalView on top - we are using a simple CSS pseudo-element trick to vertical-align the ModalView without depending on its size. The trick is to make the ModalView animation container with display: inline-block and vertical align: middle and add a pseudo-element in front of it also with the same styles, but with height: 100% instead. This effectively makes the ModalView centered vertically. So the only thing you need to make it aligned to top is to add this CSS rule:
.km-modalview-root:before {
vertical-align: top;
}
The difficult thing now is to selectively apply this to only some of the ModalViews you have. This can be done by using the ModalView init event to set a class on its outermost container, .km-modalview-root, and use it to align the ModalView to top. Check the demo here and let me know if this helps.
About the place where this is documented - you're correct, this information should also be added to the breaking changes document here, I'll see to it. I've also updated your points for this.
Regards,
Kamen Bundev
Telerik
Actually it is much easier to show a ModalView on top - we are using a simple CSS pseudo-element trick to vertical-align the ModalView without depending on its size. The trick is to make the ModalView animation container with display: inline-block and vertical align: middle and add a pseudo-element in front of it also with the same styles, but with height: 100% instead. This effectively makes the ModalView centered vertically. So the only thing you need to make it aligned to top is to add this CSS rule:
.km-modalview-root:before {
vertical-align: top;
}
The difficult thing now is to selectively apply this to only some of the ModalViews you have. This can be done by using the ModalView init event to set a class on its outermost container, .km-modalview-root, and use it to align the ModalView to top. Check the demo here and let me know if this helps.
About the place where this is documented - you're correct, this information should also be added to the breaking changes document here, I'll see to it. I've also updated your points for this.
Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Rank 1
answered on 11 Jul 2014, 01:35 PM
Thanks Kamen,
That looks like exactly what I need. This one was really throwing me for a loop this week.
Thanks again for the response!
That looks like exactly what I need. This one was really throwing me for a loop this week.
Thanks again for the response!