web-dev-qa-db-ja.com

フレックスグリッドがp-colで機能しない-＃primeng Angular 5

私はAngularにprimeNGを使用しています

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

私がこれを試しているとき

<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>

ボックスは互いに重なり合っており、隣り合っていません。

npm install primeflex --save

と追加

"node_modules/primeflex/primeflex.css"

angle.jsonに

primeflex.cssに関連するもののようです

p-colクラスは正常に機能していますが、p-col-＃（p-col-1、p-col-2など）が期待どおりに機能していません

これはp-colの値です

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

これはp-col-＃の値です

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

たとえば、p-col-＃のパディングを0に変更すると、機能しますが、パディングがありません。（p-col-＃をp-colと同じ値に変更しようとしました。それは機能していません）

何か案は ？

ありがとうRahav

angularprimeng
4
RMagen

それは私のAngular6プロジェクトでの作業です。

  1. primeNGとPrimeFlexをインストールします

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

  2. angle.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>
6
Sato

PrimeNGPrimeFlexのAngular 7）でも同じ問題が発生しました。

それを修正するためにstyles.cssファイルに以下を追加しました。

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