CODEWITHSUNDEEP
jquerycssjquery-mobilemobile
FR STAR
FR STAR

Reputation: 702

Jquery mobile data-theme attribute cannot use everywhere

Using jquerymobie theme roller I found few issues and I'm not sure how get over with.

ISSUE 1: When I define the data-theme attribute to the beginning of the div eg <div data-role="page" data-theme="a"> then inside that if I want place a another theme to a div like the below example then it's not working. Eg :

<div data-role="page" data-theme="a">
        <div data-theme="e">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
</div>

ISSUE 2: In my case I've to put radio buttons in grid view using class="ui-grid-a". I know there's already in jquerymobile <filedset> element has to wrap with radio buttons but In my case that design not suitable. However, my radio button need theme "e" colour to despite the default theme I've specified data-theme="e" in the wrapping grid div eg:

<div data-role="page" data-theme="a">
            <div data-role="header" data-position="inline" data-theme="b">
                <h1>It Worked!</h1>
            </div>

            <div class="ui-grid-a" data-theme="e">
                <form>
                    <div class="ui-block-a"><label class="border-r"><input  type="checkbox" name="checkbox-0" /> BLACK </label></div>
                    <div class="ui-block-b"><label class="border-r"><input type="checkbox" name="checkbox-0" /> BLACK </label></div>
                </form>
            </div>
        </div>

But it doesn't seems to working check my online example I've tried http://jsfiddle.net/SmYZd/. However if I specify the theme to the speific form element it works eg <div class="ui-block-a"><label class="border-r"><input type="checkbox" data-theme="e" name="checkbox-0" /> BLACK </label></div> see the example form http://jsfiddle.net/EEFQR/.

Could anyone please let me know about this ? I know I can achieve my colour with simply adding similar colours to additional css but in jquerymobile css we already have lot of css inbuilt. I just need know why we can't use data-theme attribute as to our wish on any element ?

Upvotes: 1

Views: 3503

Answers (1)

Omar
Omar

Reputation: 31732

Issue 1:

You should specify data-role in order to call the data-theme.

Check this: http://jsfiddle.net/EEFQR/

Issue 2:

I am not sure what is your problem. The design of the ui-grid or calling data-theme?

Upvotes: 2

Related Questions