1

estoy haciendo una pagina web con html, css y django en la cual se pueden crear noticias. En la parte de la creacion de la noticia, al expandir el textarea se sale todo para afuera del borde en vez de expandirse. La idea es que al expandirse el textarea se expanda tambien el cuadro. Los bordes rojos es solo por ahora para ver cuanto ocupa cada cosa! introducir la descripción de la imagen aquí

Y aca dejo el css:

.containerForm {
    display: block;
    width: 550px;
    margin: auto;
    margin-top: 20px;
    height: 380px;
    padding: 15px 90px 90px 90px;
    border: 1px solid red;
    background-color: rgba(201, 201, 201, 0.205);
    font-family: 'Fjalla One', sans-serif;
    font-weight: 100 normal;
    letter-spacing: 1px;
}

.containerForm h4 {
    border: 1px solid red;
    text-align: center;
}

.form-group {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 10px;
}

.form-group input {
    font-size: 16px;
    width: 300px;
}

.form-group textarea {
    font-size: 12px;
    width: 300px;
    resize: vertical;
}

.form-group label {
    border: 1px solid red;
    width: 100px;
}

.form-controlPost {
    display: block;
    margin: auto;
    padding: 20px;
    border: 1px solid red;
}

.button-newPost {
    display: block;
    margin: auto;
    width: 150px;
    height: 25px;
    background-color: rgb(60, 214, 60);
    font-size: 16px;
    border: none;
    border-radius: 50px;
}
1
  • Sin tener tu HTML para verificar te diría que con quitarle el height a .containerForm debería de bastarte. Es el que está ocasionando que el contenido se salga del contenedor.
    – phpMyGuel
    el 29 may. 2020 a las 6:53

1 respuesta 1

1

Efectivamente le estás poniendo un alto fijo al .containferForm. Si quieres que al menos sea de ese tamaño tendrías que cambiarlo por min-height, y éste irá creciendo a medida que sus elementos se vayan expandiendo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.