css - Angular 材质:MatTooltip 位置和样式在 MatIcon 上被破坏
问题描述
我正在尝试在材料输入字段中使用材料图标。此图标应显示材料工具提示。
结果是一个很好的动画,但完全没有样式(如正文)和完全错误的定位工具提示。
我哪里做错了?
我的html:
<section>
<div class="row">
<mat-form-field>
<input matInput name="newPin" placeholder="Neue PIN" required type="password"
[(ngModel)]="newPin" [disabled]="!selectedToken">
<mat-icon matTooltip="{{getPinTooltip()}}" [matTooltipPosition]="'below'">
info
</mat-icon>
</mat-form-field>
<mat-form-field>
<input matInput name="controlPin" type="password" required
placeholder="Neue PIN wiederholen"
[(ngModel)]="controlPin" [disabled]="!selectedToken">
</mat-form-field>
</div>
</section>
而我的更少:
body {
font-family: Helvetica, FreeSans, sans-serif;
background-image: url('./assets/images/background.jpg');
}
section {
margin-top: 2em;
}
.row {
margin-bottom: 1rem;
}
mat-form-field {
color: @inputfield-text-color;
width: 95%;
margin-bottom: .5em;
.mat-input-element {
background-color: @inputfield-background-color;
border-radius: .3em;
padding: 1em 0.6em 0.2em 0.6em;
line-height: 1.7em;
&:disabled {
background-color: @inputfield-disabled-color;
color: dimgrey;
}
}
.mat-form-field-label-wrapper {
left: 0.6em;
top: 0.3em;
font-size: .8em;
}
}
// here I tried to fix it, but it had no effect:
.input-tooltip-icon {
position: absolute;
z-index: 1;
top: .3em;
right: -.50em;
cursor: context-menu;
color: @button-color;
}
解决方案
推荐阅读
- tensorflow - Jupyter Notebook 在使用 MaxPool 层时被杀死
- java - 2个线程在java中一次启动
- ethereum - web3.py 中 sendTransaction 和 sendRawTransaction 的区别
- c++ - SDL2 窗口是透明的
- r - How to define blocks of elements in a vector to zero and looping over the next blocks?
- php - Cakephp 在文件夹中调用 .php 文件
- sql-server - 从 SQL Server 表中动态删除记录
- angular - @angular/material 的引导主题
- python - 将谷歌翻译单词定义加载到 python
- c# - 如何计算没有重复的n个元素的组合