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

2 posts, 0 answers
  1. Robin
    Robin avatar
    40 posts
    Member since:
    Jul 2012

    Posted 28 Jul 2013 Link to this post

    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/
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 31 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top