Place inputs vertically using flexbox

Question

Place inputs vertically using flexbox

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Good I created a small contact form and I do not understand why the inputs not are placed by columns.

To try that I use flexbox , specifically to the container of inputs with identifier id="Fila3Formulario" , I declare display: flex and I apply a flex-direction:column .

Should not all the contents of that container be placed by columns?

#ModalContacto {
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

#Formulario {
  height: 500px;
  width: 500px;
  background-color: #e0e7e9;
  border-radius: 22px;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50px 30px 250px;
  grid-template-columns: 90% 5%;
  justify-content: center;
}

.ClassFormulario {
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ClassFormulario span {
  background-color: #354649;
  color: #FFFFFF;
  padding: 5px;
  border-radius: 10px;
}

.uno {
  /*    background-color: aqua;*/
  grid-column: 1/3;
}

#Fila3Formulario {
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#Fila3Formulario input {
  height: auto;
  width: 30px;
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px;
  margin: 5px;
}

#Fila3Formulario textarea {
  height: 100px;
  width: 300px;
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px;
  margin: 5px;
}

<div id="ModalContacto">
  <div id="Formulario">

    <div class="ClassFormulario Fila1Formulario">
      <img src="img/LogosGimnasios/PowerProject.png" alt="">
    </div>

    <div class="ClassFormulario Fila1Formulario">
      <span id="CerrarFormulario">X</span>
    </div>

    <div class="ClassFormulario uno Fila1Formulario">
      <p> Formulario de contacto</p>
    </div>

    <div class="ClassFormulario uno" id="Fila3Formulario">
      <form action="">
        <input type="text" placeholder="Nombre y apellidos*">
        <input type="tel" placeholder="e-mail*">
        <input type="email" placeholder="Teléfono">
        <textarea placeholder="¿Que quieres saber?*"></textarea>
        <input type="submit">
      </form>
    </div>

  </div>
</div>

Health!

css3 css flexbox

asked by NEA 28.01.2018 в 14:03

source

2 answers

Determine the closest number, within the array, to the given number how to pass data to the controller from laravel view

score 2 · Answer 1

Keep in mind that when defining a flex container the behavior applies to the child elements of it.

In your case the only child of div Fila3Formulario is the form element, so it is this element that is positioned.

If you want to align the elements input you should define the behavior in a direct parent of these:

#ModalContacto {
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

#Formulario {
  height: 500px;
  width: 500px;
  background-color: #e0e7e9;
  border-radius: 22px;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50px 30px 250px;
  grid-template-columns: 90% 5%;
  justify-content: center;
}

.ClassFormulario {
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ClassFormulario span {
  background-color: #354649;
  color: #FFFFFF;
  padding: 5px;
  border-radius: 10px;
}

.uno {
  /*    background-color: aqua;*/
  grid-column: 1/3;
}

#Fila3Formulario {
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#Fila3Formulario input {
  height: auto;
  width: 30px;
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px;
  margin: 5px;
}

#Fila3Formulario textarea {
  height: 100px;
  width: 300px;
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px;
  margin: 5px;
}

<div id="ModalContacto">
  <div id="Formulario">

    <div class="ClassFormulario Fila1Formulario">
      <img src="img/LogosGimnasios/PowerProject.png" alt="">
    </div>

    <div class="ClassFormulario Fila1Formulario">
      <span id="CerrarFormulario">X</span>
    </div>

    <div class="ClassFormulario uno Fila1Formulario">
      <p> Formulario de contacto</p>
    </div>

    <form action="">
      <div class="ClassFormulario uno" id="Fila3Formulario">
        <input type="text" placeholder="Nombre y apellidos*">
        <input type="tel" placeholder="e-mail*">
        <input type="email" placeholder="Teléfono">
        <textarea placeholder="¿Que quieres saber?*"></textarea>
        <input type="submit">
      </div>
    </form>

  </div>
</div>

score 0 · Answer 2

Just change the id of the div that encloses the form and place it in the form:

<div class="ClassFormulario uno" id="">
        <form action="" id="Fila3Formulario">
          <input type="text" placeholder="Nombre y apellidos*">
          <input type="tel" placeholder="e-mail*">
          <input type="email" placeholder="Teléfono">
          <textarea placeholder="¿Que quieres saber?*"></textarea>
          <input type="submit">
        </form>
      </div>

You'll have to make some custom modifications because it deforms a bit by placing it on the div, the form would remain as a child and then the form is the one that would be positioned in a column (but since the form is only a single column)