Data-Themes not working correctly with collapsibles #2460

Closed
willpracht opened this Issue Sep 16, 2011 · 5 comments

Projects

None yet

3 participants

@willpracht

If I explicitly set the data-theme on a collapsible-set, it's causing some weird behavior. Apologies in advance for the code formatting.

For example:

<div data-role="collapsible-set" data-theme="z">
    <div data-role="collapsible">
        <h3>test1</h3>
        <p>blah blah blah</p>
    </div>

    <div data-role="collapsible">
        <h3>test2</h3>
        <p>asdf asdf adsf</p>
    </div>
</div>

The generated markup is as follows:

<div data-role="collapsible-set" data-theme="z" class="ui-collapsible-set">
            <div data-role="collapsible" class="ui-collapsible-contain">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-top ui-btn-down-a ui-btn-up-a" data-theme="a"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">test1<span class="ui-collapsible-heading-status"> click to expand contents</span></span><span data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-left ui-btn-corner-all ui-shadow"><span class="ui-btn-inner ui-btn-corner-all ui-corner-top"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-plus ui-icon-shadow"></span></span></span></span></a></h3><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

                <p>blah blah blah</p>
            </div></div>
            <div data-role="collapsible" class="ui-collapsible-contain"><h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-bottom ui-btn-up-a" data-theme="a"><span class="ui-btn-inner ui-corner-bottom"><span class="ui-btn-text">test2<span class="ui-collapsible-heading-status"> click to expand contents</span></span><span data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-left ui-btn-corner-all ui-shadow"><span class="ui-btn-inner ui-btn-corner-all ui-corner-bottom"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-plus ui-icon-shadow"></span></span></span></span></a></h3><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

                <p>asdf asdf adsf</p>
            </div></div>
        </div>

Basically it's setting the h3 > anchor to data-theme A, the span for the icon as data-theme D.

I've also tried setting the individual collapsibles to Z, but get the same result.

@gseguin
Member
gseguin commented Sep 16, 2011

Created a jsFiddle with sample code http://jsfiddle.net/ghislain/WgfQs/1/

@gseguin gseguin was assigned Sep 16, 2011
@toddparker
Contributor

Seems like theming isn't working here...gseguin?

@gseguin
Member
gseguin commented Sep 25, 2011

Landed branch collapsible-redesign which should take care of this.
@willpracht, can you confirm that this does not happen anymore in latest?

@gseguin gseguin closed this Sep 25, 2011
@willpracht

Yeah, been busy. Give me a few days, I'll check it out. Thanks :).

@willpracht

@gseguin - Looks like this is now working as it should in RC1. Thanks for the quick turnaround :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment