简体   繁体   English

如何在 mat-对话框中放置列和行

[英]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.

相关问题 Angular - 如何使 mat-dialog 内的 mat-stepper 内的元素调整到对话框的高度? - Angular - How to make elements inside mat-stepper inside mat-dialog adjust to the height of the dialog? mat-dialog 没有填充屏幕 - Angular - mat-dialog not filling screen - Angular 将背景图像添加到 mat-dialog - Adding background-image to mat-dialog Angular 8 中的可拖动和可调整大小的垫子对话框 - draggable and resizeable mat-dialog in Angular 8 Angular Mat-dialog 显示了两个滚动条,如何删除第二个? - Angular Mat-dialog is displaying two scrollbars, how can I remove the second? 如何为 angular 材料垫选择使用“.cdk-overlay-pane”自定义或应用另一个 class 垫子对话框 - How to customize or apply another class with ".cdk-overlay-pane" for angular material mat-select | mat-dialog 有没有办法将多个 CSS 类添加到 mat-dialog 的 backgroundClass 属性中? - Is there a way to add multiple CSS classes to the backdropClass property of a mat-dialog? Angular Material - Mat-Dialog - 改变背景模糊/变暗效果 - Angular Material - Mat-Dialog - change background blur / darkening effect Angular Material Theme 不会改变 mat-dialog 强调色 - Angular Material Theme does not change the mat-dialog accent color 隐藏/显示 Angular 材料垫对话框中的列 - Hide/Show column in Angular material mat-dialog
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM