Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

White border seen almost at the top of button with iconpos='notext' #3613

Closed
gabrielschulhof opened this Issue · 4 comments

3 participants

Gabriel "_|Nix|_" Schulhof Todd Parker Mat Marquis
Gabriel "_|Nix|_" Schulhof
Collaborator

<a data-role='button' data-iconpos='notext'></a> generates a nice, circular button suitable for all kinds of widgets. Unfortunately, the span.ui-btn-inner inside the anchor adds a 1px white border, which becomes compressed to the top of the button, causing a white line to be tangent to the button at the top.

http://babulina.go-nix.ca/nix/ui-btn-inner-bug.avi

This line is visible with multiple swatches (tried a, c, and e)

Gabriel "_|Nix|_" Schulhof
Collaborator

My solution was this:

    #my-button .ui-btn-inner {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        height: 100%;
    }

Not sure if this is generally applicable though.

Mat Marquis Wilto was assigned
Todd Parker

@wilto - mind taking a look at this? Feel like you've fixed this in some cases already.

Gabriel "_|Nix|_" Schulhof
Collaborator

Here's where I'm using that.

Mat Marquis

Ah, I see the issue—the highlight styling is busted on that inner element. If I override it to red:

The version on the right, obviously, is how it should be—I’ll patch that up now. In terms of removing that highlight altogether, you should be able to override it in your stylesheets by declaring:

.ui-btn-icon-notext .ui-btn-inner { border-top: none; }

Mat Marquis Wilto referenced this issue from a commit
Mat Marquis Wilto Addresses comments in issue #3613 — Inner highlight in buttons now co…
…rrectly follow the border radius of the button.
798c105
Mat Marquis Wilto closed this
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.