PrimeFlex not working properly on Angular version 13

Question

I'm using "@angular/cli": "~13.3.0", "primeflex": "^3.1.3",

i've done the installation

npm install primeflex --save

and then added to angular.json file

      "node_modules/primeflex/primeflex.css"

my Html as follows:

<div class="card">
<div class="card-container yellow-container overflow-hidden">
<div class="flex">
<div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime</div>
<div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
<div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
</div>
<div class="flex">
<div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime</div>
<div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Prime and PrimeFlex</div>
<div class="flex-1 flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 m-2 px-5 py-3 border-round">Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>

the div align correctly however with no colors and styling as follows:

enter image description here

any idea what would be the issue?

Luiz Avila · Accepted Answer · 2022-09-27 23:50:54Z

2

Your code is working but missing a theme, this is why you can see the spacing but no colors

I was stuck for a while and then read on the docs that it does not come with colors, so you need to add a theme, after adding one you can see the colors here https://stackblitz.com/edit/angular-ivy-gtnzrg?file=src%2Fstyles.css

added mine on index.css however

edited Sep 27, 2022 at 23:50

answered Apr 2, 2022 at 22:28

Luiz Avila

1,3769 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user16129970 Over a year ago

yes you were right I added <link rel="stylesheet" href="unpkg.com/[email protected]/themes/saga-blue.css"> to the index.html in the angular project and it worked

Collectives™ on Stack Overflow

PrimeFlex not working properly on Angular version 13

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related