web-dev-qa-db-fra.com

la grille flexible ne fonctionne pas pour p-col- # primeng Angular 5

j'utilise primeNG pour angular 

https://www.primefaces.org/primeng/#/flexgrid

quand j'essaye ça 

<div class="p-grid">
<div class="p-col-6">
<div class="box">6 </div>
</div>
<div class="p-col-6">
<div class="box">6 </div>
</div>

</div>

les boîtes sont les unes sur les autres et non les unes à côté des autres je cours 

npm install primeflex --save

et ajouté 

"node_modules/primeflex/primeflex.css"

à angular.json

semble être quelque chose lié à la primeflex.css

la classe p-col fonctionne bien mais les p-col- # (p-col-1, p-col-2, etc.) ne fonctionnent pas comme prévu 

ce sont les valeurs pour le p-col

-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
padding: 0.5em;

ce sont les valeurs pour le p-col- #

-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0.5em;

si, par exemple, je modifie le remplissage du p-col- # par 0, cela fonctionne mais je n’ai pas de remplissage .. (j’ai essayé de modifier le p-col- # avec les mêmes valeurs que le p -col et ça ne marche pas) 

des idées ? 

Merci Rahav

angularprimeng
4
RMagen

C'est un travail dans mon projet Angular6.

  1. installer PrimeNG et PrimeFlex

    npm install primeng --save
npm install primeflex --save

  2. ajoute du style à angular.json

    "./node_modules/primeng/resources/primeng.css",
"./node_modules/primeflex/primeflex.css"

app.component.html 

<div class="p-grid">
    <div class="p-col">1</div>
    <div class="p-col">2</div>
    <div class="p-col">3</div>
</div>
5
Sato

J'ai eu le même problème dans Angular 7 avec PrimeNG PrimeFlex.

Ajout de ce qui suit au fichier styles.css pour y remédier.

 * {
  -webkit-box-sizing: border-box;
}
0
ALB