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>