Expander and Box Shadow

[tmaurstParticipant]

Trying to get a box shadow around the expander. I’ve tried applying the following css class to a div wrapper around the expander, and also to the expander content div. Neither produce any result. Is there a trick to accomplishing this? Thanks!

.box-shadow
{
    -webkit-box-shadow: #666 3px 4px 15px;
    -moz-box-shadow: #666 3px 4px 15px;
    box-shadow: #666 3px 4px 15px;
}

    <div class="expander-container box-shadow">
        <div id="FilterExpander">
            <div>
                Filter Criteria
            </div>
            <div class="expander-content box-shadow">
                <ul>
                    <li>1961 First packet-switching papers</li>
                    <li>1966 Merit Network founded</li>
                    <li>1966 ARPANET planning starts</li>
                    <li>1969 ARPANET carries its first packets</li>
                    <li>1970 Mark I network at NPL (UK)</li>
                    <li>1970 Network Information Center (NIC)</li>
                    <li>1971 Merit Network's packet-switched network operational</li>
                    <li>1971 Tymnet packet-switched network</li>
                    <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
                    <li>1973 CYCLADES network demonstrated</li>
                    <li>1974 Telenet packet-switched network</li>
                    <li>1976 X.25 protocol approved</li>
                    <li>1979 Internet Activities Board (IAB)</li>
                    <li>1980 USENET news using UUCP</li>
                    <li>1980 Ethernet standard introduced</li>
                    <li>1981 BITNET established</li>
                </ul>
            </div>
        </div>
    </div>

[DimitarParticipant]

Hello tmaurst,

You should apply the style directly to the expander itself, i.e.:

<style type="text/css">
    #FilterExpander
    {
        -webkit-box-shadow: #666 3px 4px 15px;
        -moz-box-shadow: #666 3px 4px 15px;
        box-shadow: #666 3px 4px 15px;
    }
</style>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[tmaurstParticipant]

Thanks, that works. Doesn’t look too good when collapsed though, the box shadow doesn’t adjust to the header div. I’ll see if I can come up with something…

[DimitarParticipant]

Hi tmaurst,

If you apply the box-shadow to an expander with height: "auto", the shadow will adjust to the header when the widget is collapsed, e.g.: http://jsfiddle.net/Dimitar_jQWidgets/ALyZ5/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts