web-dev-qa-db-fra.com

PrimeNG - taille du style et alignement du panneau p

Je crée une page de connexion à l'aide d'un composant du panneau de contrôle PrimeNG: https://www.primefaces.org/primeng/#/panel

Le panneau occupe toute la ligne de l'écran, mais j'aimerais que l'ensemble du panneau ait environ 30% de largeur et soit centralisé afin que je ne reçoive pas beaucoup d'espace vide dans mon panneau car je n'ai que ces deux champs et un bouton. . 

J'ai la page suivante: 

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>

Alors j'ai essayé ceci:

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

login.component.css

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

Ce qui ne marche pas.

J'ai l'écran comme ça:  enter image description here

J'ai donc inspecté le code, Chrome Dev Tools, et j'ai obtenu: 

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

Ainsi, je peux voir ma classe css'center-div'au bon endroit, juste avant le contenu du panneau, mais pourquoi cela n’affecte-t-il pas le style du contenu? ici:

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

Donc, dans Chrome Dev Tools si je change lepanneau de l'interface utilisateurclass en

  width: 30%;
  margin: 0 auto;

Cela fonctionne, alors je reçois la page que je veux:  enter image description here

Une question est donc de savoir pourquoi ma classe center-div n'affecte pas le contenu mais que ui-panel? 

Dois-je alors sélectionner css ui-panel et y faire des modifications? J'ai essayé, mais j'ai échoué. 

De l'aide?

À votre santé!

cssangularprimeng
3
skinny_jones

J'ai abandonné l'idée d'essayer d'affecter les classes css PrimeNG. J'ai donc ajouté le panneau dans un conteneur div afin de pouvoir influer sur le comportement de ce conteneur, qui fonctionne beaucoup mieux. 

J'ai donc créé un center-login class et j'ai également utilisé une requête multimédia pour travailler sur la largeur et les marges, pour le rendre réactif ... voici ce que j'ai fait:

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

Ainsi, lorsque mon écran mesure 600 pixels de large ou moins, je le laisse simplement prendre de la place, mais lorsque l'écran s'agrandit, je le centralise et fixe la largeur à 600 pixels.  enter image description here

2
skinny_jones

Vous devez utiliser le sélecteur suivant en CSS

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