jQuery UI Widgets Forums Navigation Expander Expander and Box Shadow

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 5 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Expander and Box Shadow #54713

    tmaurst
    Participant

    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>
    
    Expander and Box Shadow #54718

    Dimitar
    Participant

    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/

    Expander and Box Shadow #54774

    tmaurst
    Participant

    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…

    Expander and Box Shadow #54776

    Dimitar
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.