[英]How to place columns and rows in mat-dialog box
I have mat dialog box in Angular project and I want to make 1 row at the top and 3 row at the bottom just like the picture below but some reason I can't make it work.我在 Angular 项目中有垫子对话框,我想在顶部制作 1 行,在底部制作 3 行,如下图所示,但由于某种原因我无法使其工作。 Also I don't want horizontal scroll bar and trying to hide it by playing with the width but I'm not sure why it's still there.此外,我不想要水平滚动条并试图通过调整宽度来隐藏它,但我不确定它为什么仍然存在。 Any suggestion任何建议
HTML HTML
<div mat-dialog-content class="dialog-container">
<div class="column">
<div class="header">Tops</div>
</div>
<div class="parent">
<div class="left">
<div class="sub-header">Left</div>
<div style="background-color: darkblue;">
<div></div>
</div>
</div>
<div class="center">
<div class="sub-header">Center</div>
</div>
<div class="right">
<div class="sub-header">Right</div>
</div>
</div>
</div>
CSS CSS
.dialog-container{
width: 1000px;
height:1000px;
overflow-x:hidden;
}
.header{
position: relative;
font-size: 20px;
text-align: center;
font-family: 'Raleway';
}
.button{
margin-top: 15px;
align-items: center;
}
.clickable {
cursor: pointer;
}
.parent {
display: flex;
overflow: hidden;
}
.column{
display: flex;
flex-direction: column;
background-color: blue;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px ;
background-color: blue;
}
.center{
width: 300px;
background-color: red;
}
.header{
font-size: 30px;
font-family: "Raleway-ExtraLight";
padding: 30px;
}
.sub-header{
font-size: 20px;
margin-top: 25px;
font-weight: bold;
}
Right now it look like this现在它看起来像这样
The final design I want to achieve我想要实现的最终设计
I'm not sure how many columns or rows will be needed to achieve it like the final design but I playing around for now.我不确定需要多少列或行才能像最终设计一样实现它,但我现在还在玩。 Any suggestion will be really helpful.任何建议都会非常有帮助。
You could use mat-grid.你可以使用垫网格。 You just have to define your row and cols and that's it.你只需要定义你的行和列,就是这样。 You will have 4 cols and 4rows.您将有 4 列和 4 行。 Your buttons at the bottom will go in the mat-dialog-actions div made for this.您在底部的按钮将在为此制作的 mat-dialog-actions div 中的 go 。 Here is how you could do with mat-grid-list: Demo on StackBlitz以下是使用 mat-grid-list 的方法: StackBlitz 上的演示
If the demo is nto working, here the code so you can try it:如果演示正常工作,请在此处提供代码,以便您尝试:
html: html:
<mat-grid-list cols="18" rowHeight="1:3">
<mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
<mat-grid-tile [colspan]="7">
<input type="text" placeholder="blablabla" />
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
<mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
<mat-grid-tile [rowspan]="5">=></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>
css: css:
mat-grid-tile {
background: lightblue;
}
Css is just here to show the blocks;) Css 只是在这里展示块;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.