0

Tengo el siguiente problema, llevo horas intentando hacer que el formulario se mantenga dentro de un contenedor y que se vaya adaptando a medida que se modifica la resolución de la pantalla pero no he podido lograrlo, incluso he copiado y pegado el código de la pagina oficial de Bootstrap y nada, no se que pasa. Lo que quiero es que se mantenga dentro del contenedor izquierdo y no que sobresalga de este a medida que se reduce la resolución como pasa en la segunda imagen. Espero Puedan ayudarme a identificar que estoy haciendo mal porque no lo veo. Gracias!

*{
    padding: 0;
    margin: 0;
}

#contenedor-padre{
    position: fixed;
    width: 100vw;
    height: 100vh;
}

#contenedor-formulario{
    height: 100%;
    width: 80%;
    margin-left: 10%;
}

#columna-izquierda{
    height: 100%;
}

#columna-derecha{
    background-color: rgba(1, 1, 1, 0.1);
    height: 100%;

}

#fila{
    background-color: rgba(1, 1, 1, 0.1);
    height: 50vh;
    width: 50vw;
}
<div class="d-flex align-items-center justify-content-center" id="contenedor-padre"> 
  <div class="row" id="fila">
      <div class="col-md-6 col-6" id="columna-izquierda">
        <div class="d-flex align-items-center justify-content-center" id="contenedor-formulario">
          
          <form (ngSubmit)="contactForm(form.value)" #form="ngForm">
            <fieldset>
                <legend class="text-center" id="titulo-formulario">¡Contáctame!</legend>
                    <div class="row">
                      <div class="col">
                        <input type="text" class="form-control" placeholder="First name">
                      </div>
                      <div class="col">
                        <input type="text" class="form-control" placeholder="Last name">
                      </div>
                    </div>
            </fieldset>
          </form>
        
        </div>
      </div>  
    <div class="col-md-6 col-6" id="columna-derecha"> <img src="assets\img\imge.jpg" id="imagen-contacto"> </div>
  </div>    
</div>

Imagen 1

Imagen 2

Imagen 3

3
  • prueba quitando las clases d-flex
    – abrahamhs
    Commented el 12 ene. 2019 a las 1:32
  • Esta mejor. edite mi pregunta con una nueva imagen de como se ve sin las etiquetas d-flex. Ahora lo que sale del contenedor es la palabra ¡Contactame! que esta dentro de la etiqueta legend, como hago para que se mantenga dentro del contenedor?
    – JulianProg
    Commented el 12 ene. 2019 a las 1:40
  • En la clase .row estás aplicándole al ID #fila un ancho fijo que es el 50% del tamaño del dispositivo, es realmente esto necesario? Puedes aumentarlo a 80vw para que se ajuste. Podríamos hacer magia tratando de meter la palabra ¡Contáctame! en ese contenedor, pero si el tamaño es tan pequeño, creo que nos estamos complicando. La otra solución sería disminuir el tamaño de la fuente con @media querys Commented el 14 ene. 2019 a las 12:44

1 respuesta 1

0

Una vez que quitaste las clases d-flex prueba esto:

 <fieldset>
    <div class="row">
           <div class="col-md-12">
                <legend class="text-center" id="titulo-formulario">¡Contáctame!</legend>
           </div>
    <div>        
    <div class="row">
        <div class="col-md-6">
             <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col-md-6">
             <input type="text" class="form-control" placeholder="Last name">
        </div>
    </div>
 </fieldset>
1
  • Sigue igual. se sigue pasando a la columna derecha.
    – JulianProg
    Commented el 12 ene. 2019 a las 1:59

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.