CODEWITHSUNDEEP
cssjquery-mobile
Tony L.
Tony L.

Reputation: 19506

Make jQuery mobile button with icon and no text the same height as buttons with text

This html/css:

<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-right">Left</a>
<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext"></a>

Produces this:

enter image description here

But I want this:

enter image description here

Upvotes: 2

Views: 1285

Answers (2)

Olly John
Olly John

Reputation: 384

You can do it by setting the height attribute to 1em on all of your .ui-btn elements, or any height greated than 1em. This will set them all to the same height regardless of whether they have text inside them or not.

Upvotes: 1

Tony L.
Tony L.

Reputation: 19506

<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-right">Left</a>
<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext">ThisWontBeVisible</a>

The class ui-btn-icon-notext will remove the text ("ThisWontBeVisible") within the <a>. However, if there is no text within the <a>, it will shrink the button to a short height. Seems like a hack but also likely the simplest way to achieve the desired result.

Upvotes: 1

Related Questions