CODEWITHSUNDEEP
cssjquery-mobilebutton
Anthony Elliott
Anthony Elliott

Reputation: 3001

jQueryMobile - Change size of only a few buttons

I have several buttons across multiple 'pages' in jQueryMobile. I'm able to change the size of all buttons using the following in my css.

.ui-btn { 
    height: 150px; 
}

However, I only want the buttons to be this large (150px) on my first page (id='menu') and the other pages should have the default height value. I tried #menu .ui-btn {...} and adding a class bigButton and doing .bigButton .ui-btn {...} but that didn't work either.

<div data-role="page" id="menu">
    <div data-role="content">
        <button id="snapPic" class="bigButton" onclick="capturePhoto();">Snap picture</button> 
        <br/>
        <button id="makeClouds" class="bigButton" onclick="location.href='makeClouds.html'">Make clouds</button>
    </div>
</div>

Upvotes: 1

Views: 164

Answers (1)

Omar
Omar

Reputation: 31732

jQuery Mobile 1.3.2 and below

Add data-role="button" to anchor tag to convert it into a button. And then apply your own styles.

<a href="#" data-role="button" class="bigButton">Big Button</a>

jQuery Mobile 1.4 (Beta)

For performance purposes, data-role="button" is removed now and replaced with class .ui-btn.

<a href="#" class="ui-btn bigButton">Big Button</a>

Upvotes: 1

Related Questions