PrimeNG - styling size and alignment of p-panel

Question

I am creating a login page using a PrimeNG p-panel component: https://www.primefaces.org/primeng/#/panel

The panel takes the whole row of the screen, but I would like to make the whole panel be about 30% wide and centralized so I don't get a lot of empty space in my panel as I have only these two fields and a button.

I have the following page:

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>

So I tried this:

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

login.component.css

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

Which doesn't work.

I have the screen like this:

So I've inspected the code, Chrome Dev Tools, and I got:

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

So I can see my css class 'center-div' in the right place, just before the actual panel content, but why it doesn't affect the content style? here:

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

So in Chrome Dev Tools if I change the ui-panel class to

  width: 30%;
  margin: 0 auto;

It does work, then I get the page I want:

So one question is, why my center-div class doesn't affect the content but ui-panel does?

Should I then css select ui-panel and do changes there? I've been trying to, but I have been failed.

Any help?

Cheers!

Answer 1

I quit the idea of trying to affect the PrimeNG css classes, so I added the panel in a div container, so I can affect the behavior of that container, which works much better.

So I created a center-login class and I also used media query to work on the width and margins, to make it responsive... here's what I've done:

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

So when my screen is 600px wide or less I just let it take the space, but when the screen gets bigger I centralize it and fix the width at 600px.

Answer 2

You should use next selector in CSS

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