3

I'm using PrimeNG along with PrimeFlex. I want to center the whole form vertically and horizontally, excluding sm for phones and preferrably using PrimeFlex classes.

I tried the following, which should center it horizontally, but it didn't work out.

<div class="p-grid-nogutter flex justify-content-center align-items-center">

This one works. How is it possible? Both should be doing the same.

<div class="p-grid-nogutter" style="display: flex; justify-content: center; align-items: center">

I'm using PrimeFlex@2.0.0 and PrimeNG@12.0.0.

Snippet

<div class="p-grid-nogutter">
  <div class="p-xl-3 p-lg-3 p-md-6 p-sm-12">
    <div class="card">
      <h5>Login</h5>
      <div class="p-fluid">
        <form [formGroup]="authForm" (submit)="signIn()">
          <div class="p-field">
            <label for="username">Username</label>
            <input id="username" type="text" pInputText formControlName="username" />
          </div>
          <div class="p-field">
            <label for="password">Password</label>
            <input type="password" id="password" pPassword formControlName="password" />
          </div>
          <button pButton type="submit" label="Login" [disabled]="!authForm.valid"></button>
        </form>
      </div>
    </div>
  </div>
</div>

enter image description here

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
nop
  • 4,711
  • 6
  • 32
  • 93
  • Which version of primeflex are you using? Is the code you gave all the body code? Edit: Class names changed on V3. Here you have the migration guide: [PrimeFlex V3.0 Migration Guide](https://www.primefaces.org/primeflex/migration) – Nakarukatoshi Uzumaki Jul 30 '21 at 10:07
  • I actually realized that the classes were different by looking at my `styles.css`. `
    ` actually centered it horizontally. `"primeflex": "^2.0.0", "primeng": "^12.0.0",`
     – nop Jul 30 '21 at 10:11
  • Now I gotta figure out how to center it vertically. – nop Jul 30 '21 at 10:16
  • Here you have an answer I made yesteraday about vertically centering (if you want to take look, here you have it: [Bootstrap center in the middle in the page](https://stackoverflow.com/questions/68558955/bootstrap-centering-container-in-the-middle-of-the-page/68559305#68559305)). That question is more Bootstrap-related than primeflex-related, but the possible reasons are nearly 100% the same. I encourage you to take a look! Good luck with your business :) – Nakarukatoshi Uzumaki Jul 30 '21 at 10:20
  • @NakarukatoshiUzumaki, thanks. `
    `, it works, but I can't find primeflex classes for `height: 100%` and `min-height: 100vh`. This is my bundled styles.css which includes all classes: https://pastebin.com/WGZKw8zh.
     – nop Jul 30 '21 at 10:26
  • 1
    That's because of the version you are using of PrimeFlex. You can solve it by creating your own class or using PrimeFlex 3.0: [Height classes in PrimeFlex 3.0](https://www.primefaces.org/primeflex/height). Please remember to take a look at the migration guide mentioned above if you are going to migrate to V3.0. – Nakarukatoshi Uzumaki Jul 30 '21 at 10:41
  • @NakarukatoshiUzumaki, thanks! You can move that into an answer, so I can accept it. – nop Jul 30 '21 at 14:09
  • Yeah, doing it right now! – Nakarukatoshi Uzumaki Jul 30 '21 at 21:36

1 Answers1

1

That's due to the fact that you are using another version of PrimeFlex. Please, take a look at the Migration Guide: https://www.primefaces.org/primeflex/migration

Another possible cause is due to boxes height, you can check more about this at the answer I made here (answer is more Bootstrap-related, but is merely the same): Bootstrap centering container in the middle of the page

You can solve that type of problems either creating your own classes or updating your PrimeFlex library, which includes a lot new utilities, including height ones: https://www.primefaces.org/primeflex/height

Hope the above links help you with your problem and good luck with your project!

Edit: As recommended by @nop, here's a code snippet for PrimeFlex < 3.0.0:

<div class="p-grid p-nogutter p-d-flex p-justify-center p-ai-center" style="height: 100%; min-height: 100vh">
  <!-- Your HTML code goes right here -->
</div>
Nakarukatoshi Uzumaki
  • 325
  • 4
  • 14