Angular Material Mat Grid List Outermost Border

0
votes

I have a mat grid list with user defined number of row and col. I need to display all the border for each mat-grid-title cell.

However how do I display the outermost black border for mat-grid-list properly?

It's right and bottom border didnt show properly

<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
  <mat-grid-tile style="border: 2px solid red">
    <div class='internalMatGrid' >
      <mat-grid-list cols="1" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>

Here is my stackblitz https://stackblitz.com/edit/angular-7gjjjn

Thank you

2
cssangularangular-material

2 Answers

2
votes

Just add box-sizing: border-box; CSS property in mat-grid-title element, will resolve your issue. Thanks

<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">
    <div class='internalMatGrid' >
      <mat-grid-list cols="1" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">2</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">3</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">4</mat-grid-tile>
</mat-grid-list>
1
votes

Its a hack to fix that i don't know whether its true or not but i figured it out what you need,

I wrap grid-list inside some div and give that div a border with some padding hack.

HTML

<div class="wrap">
<mat-grid-list cols="2" rowHeight="200px">
  <mat-grid-tile style="border: 2px solid red">
    <div class='internalMatGrid' >
      <mat-grid-list cols="1" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>
</div>

CSS

.wrap {
    border: 4px solid;
    padding: 0px 4px 4px 0;
}