button with icon and no text #3284

Closed
pehrlich opened this Issue Dec 16, 2011 · 3 comments

3 participants

@pehrlich

<a data-role="button" data-icon="forward"></a>

Generates this markup:

<a data-role="button" data-icon="forward" class="ui-btn ui-btn-icon-left ui-corner-left ui-btn-up-a" data-theme="a">
<span class="ui-btn-inner ui-corner-left" aria-hidden="true">
    <span class="ui-btn-text"></span>
    <span class="ui-icon ui-icon-forward ui-icon-shadow"></span>
</span>
</a>

This appears as a rectangular button -- extra padding on the right with the empty span. The span can't simply be removed, because the button looses its height.

Here's my hack for the time being:

.ui-btn.notext .ui-btn-inner{
  padding-right: 0;
  margin-right: -5px; /* not a perfect soltiuon, leaves border along top */
}
@pehrlich

d'oh. Just found that, too.

Wouldn't be bad if it did it intelligently I suppose..

UPDATE: actually, this causes the vertical alignment to go weird next to a regular button

@jaspermdegroot
jQuery Foundation member

@pehrlich Is this what you mean with "vertical alignment to go weird next to a regular button"... http://jsbin.com/ikibog/2/

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jun 8, 2012
@jaspermdegroot jaspermdegroot Fixes #3284 - Added vertical-align middle for inline buttons to creat…
…e consistency between browsers, since the default vertical alignment differs.
7a19f58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment