Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

button with icon and no text #3284

Closed
pehrlich opened this Issue · 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
Collaborator

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

@jaspermdegroot jaspermdegroot closed this issue from a commit
@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
Something went wrong with that request. Please try again.