I'm trying to use box-shadow inside a KendoUI Mobile view, but I'm unable to make it work. Below is the code, but no shadow is shown underneath the "shadowClass" paragraph as long as it's followed by a content div or a listView that's not inset. If I remove the listView and the content-div the shadow is shown.
Is it possible to achieve the bottom shadow effect together with a listView?
The view:
The CSS:
A jsFiddle: http://jsfiddle.net/zsRFL/1/
Is it possible to achieve the bottom shadow effect together with a listView?
The view:
<
div
data-role
=
"view"
data-layout
=
"app"
data-title
=
"test"
id
=
"pageTest"
>
<
div
class
=
"shadowClass"
>
<
p
style
=
"font-weight: normal;"
>
Some explanation text goes here.
</
p
>
</
div
>
<
div
data-role
=
"content"
>
<
ul
id
=
"listview-program"
></
ul
>
</
div
>
</
div
>
The CSS:
.shadowClass {
background-color: yellow;
-moz-box-shadow:
1px
5px
9px
#000000
;
-webkit-box-shadow:
1px
5px
9px
#000000
;
box-shadow:
1px
5px
9px
#000000
;
}