CODEWITHSUNDEEP
cssangularlayoutangular-material
user9436741
user9436741

Reputation:

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. 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

<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

.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.

Upvotes: 0

Views: 2962

Answers (1)

Quentin Grisel
Quentin Grisel

Reputation: 4987

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. Your buttons at the bottom will go in the mat-dialog-actions div made for this. Here is how you could do with mat-grid-list : Demo on StackBlitz

If the demo is nto working, here the code so you can try it :

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: 

mat-grid-tile {
  background: lightblue;
}

Css is just here to show the blocks ;)

Upvotes: 1

Related Questions