Question

I’m using jquery mobile and have a form with a submit button. Unfortunately, after doing some research I learned that jquery mobile’s data-inline attribute doesn’t work for input elements. I want the submit button to just be the size of its text. Firefox must take care of this, because the button is the size I want it to be. However, IE sets the width of the button to the size of the container. Any way to style a submit button to the size of its text and no larger? I tried doing:

$('#element').css('display','inline')

That didn’t work, though.

Thanks for the help!

Answer 1

Here is a demo of a <input type="button" /> element that correctly goes to “inline” when you add the data-inline="true" attribute to it (this is tested in IE8/IE9): http://jsfiddle.net/eVTef/

To fix this in IE7 you need to add the “inline hack”:

.ui-btn-inline {
    *display : inline !important;
    zoom     : 1;
}

The property prefixed by an asterisk (*) will not be read by IE8/IE9 or any other modern browsers but will be read by IE7. The zoom : 1 has to be added so the element gets the hasLayout CSS (which cannot be manually added to an element).

Here is a demo of the above fix: http://jsfiddle.net/eVTef/1/

Bonus Round

You can also fix this issue in IE6 but you will need to specify a height for the element. To specify a height for just IE6 and no other browsers we can do something similar to the asterisk hack for IE7:

.ui-btn-inline {
    *display : inline !important;
    zoom     : 1;
    _height  : 30px;
}

Even IE7 will disregard the underscore (_) prefixed property but IE6 will use the property declaration.