web-dev-qa-db-ja.com

PrimeNG-Pパネルのサイズと配置のスタイル

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

パネルは画面の行全体を占めますが、パネル全体の幅を約30％にして集中化し、これらの2つのフィールドとボタンしかないため、パネルに多くの空スペースを確保しません。

次のページがあります。

login.componennt.html

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

だから私はこれを試しました：

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

login.component.css

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

うまくいきません。

私はこのような画面を持っています： enter image description here

だから私はコードを検査しました、Chrome開発ツール、そして私は得ました：

<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クラス '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">

したがって、Chrome Dev Tools（ui-panelクラス

  width: 30%;
  margin: 0 auto;

動作しますが、必要なページが表示されます： enter image description here

だから1つの質問は、なぜ私のcenter-divクラスはコンテンツに影響を与えないが、ui-panelは影響を与えるのか、ということです。

次に、css selectui-panelを使用して変更を加えますか？私はしようとしましたが、失敗しました。

何か助けは？

乾杯！

cssangularprimeng
4
skinny_jones

PrimeNGのcssクラスに影響を与えようとする考えをやめたので、パネルをdivコンテナーに追加したので、そのコンテナーの動作に影響を与えることができます。

center-loginクラスを作成し、メディアクエリを使用して幅とマージンを操作し、応答性を高めました...完了しました：

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

画面の幅が600ピクセル以下の場合は、スペースを確保しますが、画面が大きくなると、中央に配置して幅を600ピクセルに固定します。 enter image description here

2
skinny_jones

CSSでは次のセレクターを使用する必要があります

.center-div.ui-panel{
  width: 30%;
  margin: 0 auto;
}
0
Adam Malec