Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

button with icon and no text #3284

Closed
pehrlich opened this Issue · 3 comments

3 participants

Peter Ehrlich Todd Parker Jasper de Groot
Peter Ehrlich

<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 */
}
Peter Ehrlich

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

Jasper de Groot

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

Jasper de Groot jaspermdegroot closed this issue from a commit
Jasper de Groot 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.