CODEWITHSUNDEEP
cssjquery-mobile
Nicklas Savonen
Nicklas Savonen

Reputation: 159

jQuery Mobile - larger header buttons

I am using jQuery Mobile for an iPhone app. I don't really like the size/shape of the buttons in the page header. I think they are too small and too round shaped. I only use an icon on the buttons, and they are tiny and hard to hit on a device. I would like more square and larger buttons, like those in the Facebook app. Is there a way to archieve this through css? If so, how do I do it? Btw, I don't want to change ALL buttons, just the header buttons!

Upvotes: 3

Views: 9373

Answers (2)

Nirmal Patel
Nirmal Patel

Reputation: 5168

You can have square buttons by just specifying the button attribs provided by JQM.

<a data-icon="arrow-l" data-inline="true" data-iconpos="notext" data-corners="false">A Button</a>

For increasing sizes; you need to override the following styles:

.ui-header .ui-btn, .ui-header .ui-icon, .ui-header .ui-btn-inner {
    width: 45px;
    height: 45px;
}
.ui-header .ui-btn-inner .ui-icon{
    margin: 0px;
    border-radius: 0;
}
.ui-header {
    height: 60px;
}
​

Check this: http://jsfiddle.net/nirmaljpatel/qU5q4/

Note that you will have to center the rest of the stuff in the header yourself by specifying their top positions once you increase the height of the header.

Upvotes: 9

user1432124
user1432124

Reputation:

Try this .It will only change the button in header given header id is header

#header button{height:50px;width:200px;}

Upvotes: 4

Related Questions