HTML button tag does not word-wrap on iPhone/iPad

Question

I am having trouble getting the <button> element to render correctly on the iPhone/iPad.

Here is the sample:

<button type="button" style="width:150px; word-wrap:break-word;">some very long text to make it wrap and go to another line</button>;

The idea is to have a fixed width button and the text wraps as needed. In newest IE, FF, and even desktop Safari (Mac and PC) things work as expected. The button width is fixed, the text wraps, and the button height automatically is increased to show the wrapped lines.

On the iPhone/iPad, the text wraps, but the button height does not increase. Thus, the user cannot see all the text.

Does anyone have an idea on how to make this work on the iPhone/iPad like on the desktop browser or is this a mobile Safari limitation?

Answer 1

You can give background color : #dedede. Because IOS is not supporting "buttonface" color.

So just add this on your css.

background-color: #dedede;

Answer 2

After doing some work I have found that adding this to the button style allows the button to render better on iOS mobile devices but you lose a little of the default round styling of the buttons:

-webkit-appearance: none;

Answer 3

Ok. This took a lot of trial and error, but I actually got it to work. The key is to add "height:100%;" in the style string. Take out the height and the button does not grow horizontally. Add height and the button does grow if the text is long enough to cause a word-wrap. Guess without a height specified mobile safari gets confused. Go figure. I hate writing browser code. Sickening to think how many programming hours are wasted on crap like this.

Answer 4

If I recall correctly from my own testing, the iPad doesn't handle breaks on the button element at all. No idea if there is any way around it.

e.g. this won't work

<button>First<br/>
  Second<br/>
  Third<br/>
  Fourth<br/>
</button>