New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
gabrielschulhof opened this Issue Feb 20, 2012 · 4 comments

Comments

Projects
None yet
3 participants
@gabrielschulhof
Contributor

gabrielschulhof commented Feb 20, 2012

<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)

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Feb 21, 2012

Contributor

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.

Contributor

gabrielschulhof commented Feb 21, 2012

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.

@ghost ghost assigned Wilto Feb 22, 2012

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 22, 2012

Contributor

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

Contributor

toddparker commented Feb 22, 2012

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Feb 23, 2012

Contributor

Here's where I'm using that.

Contributor

gabrielschulhof commented Feb 23, 2012

Here's where I'm using that.

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Feb 29, 2012

Contributor

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; }

Contributor

Wilto commented Feb 29, 2012

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; }

Wilto added a commit that referenced this issue Feb 29, 2012

Addresses comments in issue #3613 — Inner highlight in buttons now co…
…rrectly follow the border radius of the button.

@Wilto Wilto closed this Feb 29, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment