PrimeNG - P-パネルのスタイリングサイズとアライメント

Question

私はPrimeNG p型パネルのコンポーネントを使用してログインページを作成しています： https://www.primefaces.org/primeng/#/panel

パネルは、画面の行全体がかかりますが、私はしたいと思います全体のパネルは約30％の幅で集中しているので、私はこれらの2つのフィールドとボタンだけを持っているので、私のパネルには空きスペースがたくさんありません。

私は次のページを持っている：

<p-panel header="Login" styleClass="center-div"> 
... 

login.component.css

：

<p-panel header="Login"> 
    <div class="ui-g"> 
    <div class="ui-lg-2 ui-md-2 ui-sm-2"> 
     <input type="text" pInputText placeholder="user" [(ngModel)]="user"/> 
    </div> 
    </div> 
    <div class="ui-g"> 
    <div class="ui-lg-2 ui-md-2 ui-sm-2"> 
     <input type="password" pPassword placeholder="password" [(ngModel)]="password"/> 
    </div> 
    </div> 
    <div class="ui-g"> 
    <div class="ui-lg-2 ui-md-2 ui-sm-2"> 
     <button pButton type="button" label="Login" (click)="doLogin()"></button> 
    </div> 
    </div> 
</p-panel> 

login.componennt.htmlは、だから私はこれを試してみました

.center-div { width: 30%; margin: 0 auto; } 

これはうまくいかない。

私はこのような画面ている：だから私は、コード、クローム開発ツールを

を視察してきましたし、私が得た：

<p-panel _ngcontent-c1="" header="Login" styleclass="center-div" ng-reflect-header="Login" ng-reflect-style-class="center-div"> 
     <div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c"> 
      <div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"> 
       <span class="ui-panel-title">Login</span> 
      </div> 
      <div class="ui-panel-content-wrapper" ng-reflect-klass="ui-panel-content-wrapper" ng-reflect-ng-class="[object Object]"> 
       <div class="ui-panel-content ui-widget-content"> 

    <div _ngcontent-c1="" class="ui-g"> 
    <div _ngcontent-c1="" class="ui-lg-2 ui-md-2 ui-sm-2"> 
     <input _ngcontent-c1="" pinputtext="" placeholder="user" type="text" class="ng-untouched ng-pristine ng-valid ui-inputtext ui-corner-all ui-state-default ui-widget"> 
    </div> 
    </div> ... 

だから私は私のCSSクラス「センターを参照してくださいすることができます-div 'は、実際のパネルコンテンツの直前で、なぜコンテンツスタイルに影響を与えないのでしょうか？ここ ：

：私はそれが仕事をして

width: 30%; 
    margin: 0 auto; 

にUI-パネルにクラスを変更した場合

<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c"> 

だからクローム開発ツールで、その後、私は私が欲しいのページを取得

私のcenter-divクラスがコンテンツに影響しない理由は1つですut ui-panel？

ui-panelを選択して変更する必要がありますか？私はしようとしていましたが、私は失敗しました。

助けが必要ですか？

乾杯！

Answer 1

私はPrimeNG CSSクラスに影響を与えようとしているので、パネルをdivコンテナに追加したので、そのコンテナの動作に影響を与えることができます。

だから私はセンターログインクラスを作成し、私もそれが応答するために、幅とマージンで動作するようにメディアクエリを使用し...ここで私がやったものだ：

login.componentを。HTML

<div class="ui-g"> 
    <div class="ui-lg-12 ui-md-12 ui-sm-12 center-login"> 
    <p-panel header="Login"> 
     <div class="ui-g"> 
     <div class="ui-lg-12 ui-md-12 ui-sm-12"> 
      <h4 class="first in-label">User</h4> 
      <input type="text" pInputText [(ngModel)]="user"/> 
     </div> 
     </div> 
     ... 

login.component.css

@media screen and (min-width: 600px) { 
    .center-login { 
    width: 600px; 
    margin: 0 auto; 
    } 
} 

だから私の画面が600PX広い以下であるとき、私はちょうどそれがスペースを取らせますが、画面が大きくなったとき、私はそれを集中し、 600pxで幅を固定します。