Tengo un formulario y me encuentro con el siguiente problema. Al momento de seleccionar un libro el título de este varía depediendo del que sea seleccionado. Puede contener un título corto o bastante extenso como muestro en las imágenes de ejemplo más abajo. Mi problema es qué el boton de registrar queda fijo y no se posiciona abajo de la ultima linea del formulario Me gustaría qué este mismo cambie su posición dependiendo del tamaño que adopte el formulario o en este caso el título del libro ya qué no sabremos qué tan extenso será.
¿Cómo puedo hacer que el botón valla bajando teniendo en cuenta el tamaño del formulario o del título de libros?
- Recomiendo copiar el código CSS y HTML y pegarlo en un editor propio y ver bien el formulario ya qué no recibe bien los link importados la extension de nuestro foro al momento de correrlo aquí.
- En el código deje comentado un texto extenso y otro no tan extenso para que puedan hacer el test
* {
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
color: rgb(0, 0, 0);
}
body {
background: #504157;
background-attachment: fixed;
height: 100vh;
background-size: cover;
background-position: center;
align-items: center;
justify-content: center;
display: flex;
}
/* ------------- FORMULARIO ------------- */
.container {
position: relative;
max-width: 430px;
width: 100%;
border-radius: 11px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 0 20px;
}
.container .forms {
display: flex;
align-items: center;
height: 530px;
width: 200%;
transition: height 0.2s ease;
}
.container .form {
width: 50%;
padding: 30px;
background-color: #fff;
transition: margin-left 0.18s ease;
border-radius: 11px;
}
.container .form .title {
position: relative;
font-size: 27px;
font-weight: 600;
}
.form .title::before {
content: '';
position: absolute;
bottom: -9%;
height: 3px;
width: 119.7%;
background-color: #4070f4;
border-radius: 25px;
}
.form .input-field {
position: relative;
height: 50px;
width: 100%;
margin-top: 30px;
}
.form .bstr button {
border-color: #4070f4;
font-display: center;
font-size: 17px;
font-weight: 500;
text-align: center;
border-radius: 6px;
background-color: #4070f4;
padding: 11px;
}
.bstr button:hover {
background-color: #145D56;
border-color: #145D56;
}
.container .btn2 {
border: none;
color: #fff;
font-size: 1em;
font-weight: 500;
border-radius: 6px;
background-color: #145D56;
text-decoration: none;
position: relative;
padding: 10px 10px 10px 10px;
}
.container .btn2 i {
font-size: 120%;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" style="margin-left: 6%;">
<a href="#">
<button type="button" class="btn2 btn-primary"><i class="uil uil-arrow-circle-left"></i> Inicio</button>
</a>
<div class="forms" style="height: 460px;">
<div class="form login" style="height: 90%;">
<span class="title" style="margin-bottom: 30%">Registro</span><br><br><br>
<form method="POST">
<div class="input-field" style="margin-top: 4%;">
<!-- TESTEAR CON EL TEXTO CORTO Y EL TEXTO LARGO -->
<!-- <h4 style="font-size: large;">Libro seleccionado: = Bioquimica</h4> -->
<h4 style="font-size: large;">Libro seleccionado: = La preparación física en el voleibol y el desarrollo de la fuerza en los deportes de carácter explosivo-balístico.</h4>
<hr>
<h4 style="font-size: large;">Fecha de Inicio = 07/03/2023</h4>
<hr>
<h4 style="font-size: large;">Fecha de Devolución = 14/03/2023</h4><br><br>
</div>
<div class="bstr d-grid col-12 mx-auto" style="margin-top: 17%;">
<button class="btn btn-primary" type="submit" id="botonRegistrar">Registrar</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
.container .forms
(tienes un height fijo ahí puesto), la pantalla no se va a extender hacia abajo para que se posicione puesto que estás diciendo que quieres que sea esa la altura, si lo que quieres es que sea fija la altura deberías poner un overflow: scrollbar o algo así, por otro lado, mira en el código html<div class="forms" style="height: 460px;">
ahí también estás definiendo un altura fija.form .input-field {
por.form.input-field {
, y boileau!!!, también deberías corregir los otros errores.