Угловой материал добавляет дополнительное пространство с помощью кнопки add_outline с гибким макетом - PullRequest
Новая
       36

Угловой материал добавляет дополнительное пространство с помощью кнопки add_outline с гибким макетом

1 голос
/ 30 мая 2019

Похоже на ошибку в библиотеке "@ angular / material"

Или в источнике CDN 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Я пытаюсь расположить элементы div внутри mat-toolbar , но при использовании внутри значка пометьте значок add_outline, у меня есть дополнительное поле. Только значок с именем «add_outline». Например, на другом скриншоте есть «меню», и никаких ошибок ..

enter image description here enter image description here

<mat-toolbar-row style="display: flex; justify-content: space-between; align-items: center;">

    <button mat-icon-button (click)="sidenav.toggle()" onclick="this.blur()">
        <mat-icon>menu</mat-icon>
        </button>


        <span class="toolbar-title">{{title}}</span>


        <button mat-icon-button (click)="changeTitleButton('New')">
        <mat-icon>add_outline</mat-icon>
        </button>

    </mat-toolbar-row>
  </mat-toolbar>

Текущая версия: "@ angular / material": "8.0.0"

Но то же самое с "@ angular / material": "7.2.5"

1 Ответ

1 голос
/ 02 июня 2019

Какое блестящее наблюдение.Я смог испытать то же самое ... причина именно в значке add_outline.что мы можем увидеть после применения класса ::ng-deep .mat-icon{border:1px solid red; display: inherit !important; }

Но это особенный случай, который мы можем разрешить с помощью свойства overflow нашего родительского div (который содержит mat-toolbar) ... в моем случае,добавлено следующее к CSS файлу: 

 .parentDiv{overflow-x:hidden;}

рабочий stackblitz доступен здесь

...