angularprimengprimeflex

PrimeFlex not rendering grid correctly

I have a new Angular project that I am trying to create the grid layour for. However, it is not rendering correctly.

This is the HTML:

<div class = "grid">
  <div class = "col-12"> Header/nav</div>
  <div class = "col-12"> Top tabs</div>
  <div class = "col-2">side nav</div>
  <div class = "col-7">main body</div>
  <div class = "col-5">widget</div>

</div>

But this is how it is rendering the data:

scrennshot of rendered

I added this to angular.json:

,
            "styles": [
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.scss"
            ],

and this to styles.scss

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

What am I missing?

Solution

  • It seems that you want to use primeflex grid

    To use it make sure you have the dependency in package.json -> "primeflex": "^3.3.0" and style imported in angular.json

    "architect": {
  "build": {
    ....
    "styles": [
      "./node_modules/primeflex/primeflex.css",
      "src/styles.css"
    ],
  }
}

    See config in this stackblitz primeflex example