Using box-shadow together with a listView (not inset) or data-role="content"

[Robin]

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:

<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;

}

A jsFiddle: http://jsfiddle.net/zsRFL/1/

[Petyo]

Hi,

The listview is positioned absolutely. In order to overlay the shadowed element, you will have to add position:relative to it.

Regards,
Petyo
Telerik