PrimeFlex not rendering grid correctly

Question

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:

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?

Answer 1

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

Answer 2

package.json

"@angular/core": "^17.2.0",
"primeflex": "^3.3.1",
"primeng": "^17.10.0",

I am faceing the same Problem, and I found that the classes ( grid, col, col-1, etc... ) do not exist in "primeflex/themes/primeone-light.css" but they are existed in "primeflex/primeflex.css".

so I fixed that problem by improting the both files into style.scss

style.scss

@import "primeflex/themes/primeone-light.css";
@import "primeflex/primeflex.css";

• do not forget to add primeng css files too.