The outer border of the Angular Material Mat Grid List is beautifully highlighted

Question

The outer border of the Angular Material Mat Grid List is beautifully highlighted

In my project, I have a mat grid list where users can define the number of rows and columns. My goal is to display borders around each mat-grid-title cell.

However, I am struggling to properly display the outermost black border for the entire mat-grid-list. The right and bottom borders are not showing up correctly.

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

If you would like to see this code in action, check out my stackblitz here: https://stackblitz.com/edit/angular-7gjjjn

Thank you for your help!

css angular angular-material

Answer 1

Answer №1

To fix the issue, simply include the CSS property box-sizing: border-box; in the mat-grid-title element. Thank you for your solution.

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

Answer 2

To fix the issue, simply include the CSS property box-sizing: border-box; in the mat-grid-title element. Thank you for your solution.

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

Answer 3

Answer №2

There is a clever workaround that may or may not be entirely accurate, but I have discovered a solution to address your needs.

I decided to enclose the grid-list within a div element and apply a custom styling using a border and padding trick.

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;
}

Answer 4

There is a clever workaround that may or may not be entirely accurate, but I have discovered a solution to address your needs.

I decided to enclose the grid-list within a div element and apply a custom styling using a border and padding trick.

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;
}

The outer border of the Angular Material Mat Grid List is beautifully highlighted

Answer №1

Answer №2

Similar questions

HTML input field's placeholder text is truncated at the end

Ensure that the corner ribbon remains in place on the pricing table by making

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

Achieving a seamless scrolling effect using CSS

Incorporating custom CSS and HTML into the link is essential for enhancing the appearance of KnpMenu

Close the overlay by clicking outside of it

The Input Boxes Are Too Broad

Retrieving the value of a formControl within a formArray is made possible through a reactive form in

Ways to create a vertical bottom-up tree view using d3.js

Guide for manually initiating the mouseleave event on a smartphone or tablet

What is the best way to create a centered vertical line with text in the middle?

What steps can I take to ensure that this list remains fixed at the bottom of the page?

Utilize ngrx effects for making API requests without storing the response in the store

Having trouble showing table data in Angular

Enhancing the bottom border of an unordered list when incorporating styled bullets

How to utilize the CSS hover feature within an Angular directive?

Step-by-step guide to achieving a File div effect using CSS

How to ensure Angular mat-button-toggle elements are perfectly aligned within their respective groups

How can I retrieve the row index in an Angular Mat-Table that has expandable content?

angular index.html code displayed