CODEWITHSUNDEEP
jqueryjquery-mobile
Ian Vink
Ian Vink

Reputation: 68750

jQueryMobile: Button on header is half height

I placed a button in the header of a page and it renders half the height. As well, there is a width gap to the right.

I have used fairly simple jQueryMobel syntax.

URL: http://sandapps.com/Data/Mobile_Energy_Oil_Gas_Pertroleum_Coal_Solar_Wind.aspx

On an iPhone 4S:

enter image description here

Upvotes: 0

Views: 1047

Answers (4)

Carmine
Carmine

Reputation: 1

Try this:

data-iconshadow="false" data-iconpos="notext"

Upvotes: 0

Jasper
Jasper

Reputation: 76003

You should be able to create buttons without text using the jQuery Mobile framework and without hacking the framework's CSS. I do often and I haven't had them display like yours. For icons without text I believe you are supposed to declare: data-iconpos="notext" as an attribute for the anchor tag:

<div data-role="header">
    <h1>...</h1>
    <a href="#" data-iconpos="notext" data-icon="home">Some Text That Won't Display</a>
</div>

Source: http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Here is a demo using the same <a> code as above: http://jsfiddle.net/3njz7/

Also note that you can have text in your anchor tag if you set the data-iconpos attribute to notext.

Upvotes: 4

ShankarSangoli
ShankarSangoli

Reputation: 69905

Provide a height to the span which you have used to show the home button. 10px height works fine try with that.

I don't see any white space on the right side.

Upvotes: 1

Timothy Aaron
Timothy Aaron

Reputation: 3078

Add a space to the button text. http://screencast.com/t/rJ40PGjn42

Upvotes: 0

Related Questions