Vertical / Horizontal Center of PrimeVue Block 'LoginForm'

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages
Post Reply
holsteto
Posts: 1
Joined: 15 Aug 2022, 10:58

15 Aug 2022, 11:11

Hi,
i am trying to vertically / horizontally center the demo primevue-block 'loginform', but I seem to miss something.
Can someone explain the basic setup of the app/app-container classes and give an example on how to vertically and horizontally center a form/control?

This would be a good example to put in the documentation, it will be needed for modal dialogs and things like that. Or maybe it is already in the documentation, and I cannot find it. Can someone point me in the right direction?

Help much appreciated. Thanks in Advance!
Tobias


This is my current approach, which centers it horizontally. However, the containers don't get the full size of the available space.

Code: Select all

<template>
  <div id="app">
    <div class="app-container">
      <div class="grid grid-nogutter justify-content-center align-items-center col-12 max-h-max">
        <div class="flex justify-content-center align-items-center flex-column" style="width:1000px">

  <!-- code snippet vue block -->
  <div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
    <div class="text-center mb-5">
      <img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
      <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
      <span class="text-600 font-medium line-height-3">Don't have an account?</span>
      <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
    </div>

    <div>
      <label for="email1" class="block text-900 font-medium mb-2">Email</label>
      <InputText id="email1" type="text" class="w-full mb-3" />

      <label for="password1" class="block text-900 font-medium mb-2">Password</label>
      <InputText id="password1" type="password" class="w-full mb-3" />

      <div class="flex align-items-center justify-content-between mb-6">
        <div class="flex align-items-center">
          <Checkbox id="rememberme1" :binary="true" v-model="checked" class="mr-2"></Checkbox>
          <label for="rememberme1">Remember me</label>
        </div>
        <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
      </div>

      <Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
    </div>
  </div>
  <!-- end code snippet vue block -->
   	
        </div>
      </div>
    </div>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  max-height: 100%;
}

body{
  max-height: 100%;
}

.app-container {
  max-height: 100%;
}
</style>

Post Reply

Return to “PrimeFlex”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests