Search code examples
cssgridprimengangular14

How do I get horizontal and vertical stretch in Angular/PrimeNG 14?

I need a grid in Angular/Primeng 14 that stretches both horizontally and vertically. I started with this stackblitz which is broken under Angular 14. Horizontal stretch is works, but to get vertical stretch I've resorted to this from years ago. Here's the result, which works. It stretches both vertically and horizontally:

Grid with vertical and horizontal stretch

I doubt this is the right way to use Angular/PrimeNG 14. I haven't seen a stackblitz with an irregular grid like this, and unfortunately every stackblitz I've tried is broken under Angular 14.

What is the right way to get both vertical and horizontal stretch in Angular/PrimeNG 14?

Here are the html and styles (styles taken from this broken stackblitz:

<h5>Grid Demo</h5>

<div class="vertical-container" style="height: 85vh;">
<div class="grid flex" style="height: 50%;">
  <div class="col-4 row" style="height: 100%;">
    <div class="box box-stretched">
      0,0
    </div>
  </div>
  <div class="col-8"  style="height: 100%;">
    <div class="box box-stretched">
      0,1
    </div>
  </div>
</div>
<div class="grid flex" style="height: 50%;">
  <div class="col-4">
    <div class="box box-stretched">
      1,0
    </div>
  </div>
  <div class="col-8">
  </div>
</div>
</div>



styles: [
    `
      .box {
        background-color: var(--surface-e);
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 4px;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
          0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
      }

      .box-stretched {
        height: 100%;
      }

      .vertical-container {
        margin: 0;
        height: 100%;
        background: var(--surface-d);
        border-radius: 4px;
      }
    `
  ]
Solution

  • Have a look to PrimeFlex, you should achieve your goal mixing flex shrink and flex direction classes