CODEWITHSUNDEEP
jquery-mobile
Yuval Levy
Yuval Levy

Reputation: 2516

in Jquery mobile - change size of icon button in header

im trying to add info "i" button in the header left size.

i did it but the button appear very small and not in the center of the header height. this is the code of the header:

<div data-role="header" data-position="fixed">
    <a href="#" data-role="button" data-icon="info" data-iconpos="notext"></a>
    <div>           
        <h2 style="text-align: center">something written here</h2>
    </div>      
</div><!-- /header -->

i want to enlarge the info "i" button, and also put it in the left and in the center of the height of the header line. how can i do this?

Thanks

Upvotes: 0

Views: 12438

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85378

Live Example:

JS:

// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

UPDATE: (I think this is what you're looking for)

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px');

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>

Upvotes: 0

Gaurav
Gaurav

Reputation: 1564

Following is correct syntax

Remove div around h2, it will mess the jquery css.

Try Changing h2 to h1. So the button will come in center of the hearer height.

Try giving the button class... class="ui-btn-left"

<div data-role="header" data-position="inline">
    <a href="index.html" data-icon="delete" class="ui-btn-left" >Button Left</a>
    <h1>Edit Contact</h1>
    <a href="index.html" data-icon="check" class="ui-btn-right" >Button Right</a>
</div>

Upvotes: 1

Related Questions