英文:
Is there a way to center datepicker vertically in mat-datepicker?
问题
有两个状态：
状态 - 01：
状态 - 02：
在状态-01中，“选择日期”垂直居中。就像这样，我尝试将“选择日期”文本和所选日期垂直居中。不确定我漏掉了什么。请帮助我。
我的StackBlitz链接在这里。
英文:
There are two states :
State - 01:
State - 02:
In state-01 , "Choose a date" is vertically centered . Like that , I'm trying to center "Choose a date" text and selected date vertically . Not sure what I'm missing . Please help me out .
My stackBlitz link is here
答案1
得分: 0
在你的情况下，当你需要为输入框设置样式时，angular-material提供了appearance="outline"属性，如果你想要使用，就像这样：
<mat-form-field appearance="outline">
<mat-label>Outline form field</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
<mat-hint>Hint</mat-hint>
</mat-form-field>
如果你想要像你的示例那样自定义样式，那么你需要进行一些样式设置，比如在具有float-label时给它添加padding，如下所示：
::ng-deep .mat-form-field.mat-form-field-should-float {
padding-top: 20px;
}
原因：
mat-input的正常行为是将标签浮动在一些负值上方，你可以将它的float设置为never，这样标签就不会上浮，欲了解更多，请参阅官方文档。
英文:
In your case when you need to style input with box angular-material provide that input 'appearance="outline"` if you want to use, like this
<mat-form-field appearance="outline">
<mat-label>Outline form field</mat-label>
<input matInput placeholder="Placeholder">
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
<mat-hint>Hint</mat-hint>
</mat-form-field>
Else if you want to style that custom like in your example then you need a some styling like give it padding when it has float-label like below
::ng-deep .mat-form-field.mat-form-field-should-float {
padding-top:20px;
}
> REASON: Normal behavior of mat-input is that it float the label
> above in some negative values, you can set that float to never so
> that label doesn't go above, for more you can read in its [OFFICIAL
> DOC]
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论