Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(button): fixes style inconsistencies between md-buttons using `…
Browse files Browse the repository at this point in the history 
…a` and `button` under the hood

Closes #2440
  • Loading branch information
Robert Messerle committed Jun 8, 2015
1 parent 6519910 commit cc07e63
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/components/button/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $icon-button-margin: rem(0.600) !default;

outline: none;
border: 0;
display: inline-block;
display: inline-table;
padding: $button-padding;
margin: $button-margin;
line-height: $button-line-height;
Expand Down

8 comments on commit cc07e63

@kuhnroyal
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertmesserle This breaks consistent button styles inside a layout="column", button takes full witdh while anchor does not.

@robertmesserle
Copy link
Contributor

@robertmesserle robertmesserle commented on cc07e63 Jun 16, 2015 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kuhnroyal
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes was working on this for a while: http://plnkr.co/edit/htsnsfDOjDsAY9g17p26?p=preview

The bottom example illustrates the new issue.

The real problem seems to be the overflow: hidden on the .md-button class. I am not sure but I think this has no effect and can safely be removed. With that change and back to display: inline-block it seems fine. display: block works as well, not sure if that might be an option.

Problem 2 is something that has bugged me for a while. Button heights are not consistent in Firefox. button is 38px and a is 36px as it is supposed to. This can be fixed by removing the line-height: 36px from .md-button and setting it only for a.md-button.

You can test both problems by uncommenting the CSS.

@robertmesserle
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, thanks! Committing a fix right now.

@robertmesserle
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix is up - once this propagates over to bower, it should be resolved.

The fix: b1a144d

@kuhnroyal
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thanks.
Should I open an issues for the Firefox problem?

@robertmesserle
Copy link
Contributor

@robertmesserle robertmesserle commented on cc07e63 Jun 16, 2015 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hamidyfine
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks... it works!

Please sign in to comment.