Skip to content

fix(material/button): anchor mat-icon-button as matSuffix focus misaligned - #21117

Merged
mmalerba merged 2 commits into
angular:masterfrom
TakumaKira:fix-mat-icon-button-misaligned
Jan 15, 2021
Merged

fix(material/button): anchor mat-icon-button as matSuffix focus misaligned#21117
mmalerba merged 2 commits into
angular:masterfrom
TakumaKira:fix-mat-icon-button-misaligned

Conversation

@TakumaKira

@TakumaKira TakumaKira commented Nov 22, 2020

Copy link
Copy Markdown
Contributor

Fixes misaligning anchor element with mat-icon-button applied. This also fixes misaligning on other elements like div.

Fixes #20949

Takuma Kira
fix(material/button): anchor mat-icon-button as matSuffix focus misal…
d835575 
…igned

Fixes misaligning anchor element with mat-icon-button applied. This also fixes misaligning on other elements like div.

Fixes angular#20949
@TakumaKira
TakumaKira requested a review from jelbourn as a code owner November 22, 2020 17:11
@google-cla google-cla Bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 22, 2020
@jelbourn
jelbourn requested review from mmalerba and removed request for jelbourn November 25, 2020 04:19
@kryshac

kryshac commented Dec 16, 2020 •
edited
Loading

Copy link
Copy Markdown
Contributor

It doesn't work in firefox.

in chrome:
image

in firefox:
image

in firefox works only with display: inline-block;

.mat-icon-button {
    display: inline-block;
    font-size: inherit;
    width: 2.5em;
    height: 2.5em;
}

<mat-form-field  appearance="fill">
  <mat-label>Aggregation</mat-label>
  <mat-select [formControl]="control" name="food">
    <mat-option value="day">Day</mat-option>
    <mat-option value="week">Week</mat-option>
    <mat-option value="month">Month</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>From</mat-label>
  <input matInput [matDatepicker]="picker1" [formControl]="controlFrom" />
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>To</mat-label>
  <input matInput [matDatepicker]="picker2" [formControl]="controlTo" />
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

image

@TakumaKira

TakumaKira commented Dec 22, 2020 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@kryshac

Thank you for pointing it out.

in firefox works only with display: inline-block;

display: inline-flex; also fixes it. I pushed the change!

mmalerba
mmalerba approved these changes Jan 5, 2021
View reviewed changes

@mmalerba mmalerba left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Jan 5, 2021
@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Jan 5, 2021
@mmalerba
mmalerba merged commit 54d6b3e into angular:master Jan 15, 2021
mmalerba pushed a commit that referenced this pull request Jan 15, 2021
@TakumaKira Takuma Kira @mmalerba
fix(material/button): anchor mat-icon-button as matSuffix focus misal…
55253ab 
…igned (#21117)

* fix(material/button): anchor mat-icon-button as matSuffix focus misaligned

Fixes misaligning anchor element with mat-icon-button applied. This also fixes misaligning on other elements like div.

Fixes #20949

* fix(material/button): fix height is increased in firefox

Fixes #20949

Co-authored-by: Takuma Kira <takuma@kirakiraworx.com>
(cherry picked from commit 54d6b3e)
mmalerba pushed a commit that referenced this pull request Jan 15, 2021
@TakumaKira Takuma Kira @mmalerba
fix(material/button): anchor mat-icon-button as matSuffix focus misal…
541bf5b 
…igned (#21117)

* fix(material/button): anchor mat-icon-button as matSuffix focus misaligned

Fixes misaligning anchor element with mat-icon-button applied. This also fixes misaligning on other elements like div.

Fixes #20949

* fix(material/button): fix height is increased in firefox

Fixes #20949

Co-authored-by: Takuma Kira <takuma@kirakiraworx.com>
(cherry picked from commit 54d6b3e)
@angular-automatic-lock-bot

angular-automatic-lock-bot Bot commented Feb 15, 2021

Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Feb 15, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer
@mmalerba mmalerba mmalerba approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

bug(mat-form-field): anchor mat-icon-button as matSuffix focus misaligned

4 participants

@TakumaKira @kryshac @mmalerba @jelbourn