Trying to position form input fields in columns of 3

user_14181794 0
Viewed 41

I am trying to position my input fields in my form to be in a column of 3, the problem now is that i cant figure out how to do it because i have much more code than i planned to initially.

No matter what i have tried it have not worked, have been sitting for hours but i cant figure out what to do. Any help would be much appreciated, thanks in advance.

.form-control {
position: relative;
padding-bottom: 20px;
}

.input-fields {
display: flex;
flex-direction: column;
margin-right: 4%;
width: 100%;
}

.input-fields .input,
.kompetanse textarea {
 margin: 10px 0;
 background: transparent;
 border: 0;
 font-family: inherit;
 border-bottom: 2px solid #fff;
 padding: 10px;
 color: #fff;
 font-size: 20px;
 }

 .input-fields .input {
 width: 32%;
 float: left;
 }

 .kompetanse textarea {
 height: 150px;
 width: 100%;
 }
<div class="cv-form">
        <form name="cv" id="cv" autocomplete="off" class="input-fields">
            <h1 class="h1-venstre">Curriculum Vitae</h1>
            <div class="form-control">
                <input id="navn" type="text" class="input" placeholder="Navn" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="adresse" type="text" class="input" placeholder="Adresse" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="epost" type="text" class="input" placeholder="E-post" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="mobil" type="text" class="input" placeholder="Mobil" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="status" type="text" class="input" placeholder="Sivil status" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control"><input id="født" type="text" class="input" placeholder="Fødselsdato" value=''><small>Feilmelding</small></div>
            <div class="form-control">
                <input id="utdanning" type="text" class="input" placeholder="Utdanning" value=''></div>
            <div class="form-control"><input id="yrkeserfaring" type="text" class="input" placeholder="Yrkeserfaring" value=''>
                <small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="kurs" type="text" class="input" placeholder="Kurs/etterutdannelse" value=''><small>Feilmelding</small>
            </div>
            <div class="form-control">
                <input id="annet" type="text" class="input" placeholder="Andre opplysninger" value=''><small>Feilmelding</small>
            </div>
            <div class="kompetanse">
                <textarea id="kompetanse" placeholder="Kompetanse" value=''></textarea>
            </div>
            <button type="submit" onclick="printetekst();" id="openBtn" class="custom">Send inn cv</button>
        </form>

flexbox forms css html
1 Answers

See if this help you. I have added a helper div .form-inputs and give it a display flex with flex-wrap property with the value wrap. And then give to the .form-control the width of 33.3333%. Also remove some css properties.

Note: You need to reset your css or this will not work.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.form-control {
  width: 33.33333333333333%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 20px;
}

.input-fields .input,
.kompetanse textarea {
  background: transparent;
  border: 0;
  font-family: inherit;
  border-bottom: 2px solid #fff;
  padding: 10px;
  color: #fff;
  font-size: 20px;
}

.input-fields {
  width: 100%;
}

.kompetanse textarea {
  height: 150px;
  width: 100%;
}

.form-inputs {
  display: flex;
  flex-wrap: wrap;
}

<div class="cv-form">
          <form name="cv" id="cv" autocomplete="off" class="input-fields">
            <h1 class="h1-venstre">Curriculum Vitae</h1>
            <div class="form-inputs">
              <div class="form-control">
                <input
                  id="navn"
                  type="text"
                  class="input"
                  placeholder="Navn"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="adresse"
                  type="text"
                  class="input"
                  placeholder="Adresse"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="epost"
                  type="text"
                  class="input"
                  placeholder="E-post"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="mobil"
                  type="text"
                  class="input"
                  placeholder="Mobil"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="status"
                  type="text"
                  class="input"
                  placeholder="Sivil status"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="født"
                  type="text"
                  class="input"
                  placeholder="Fødselsdato"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="utdanning"
                  type="text"
                  class="input"
                  placeholder="Utdanning"
                  value=""
                />
              </div>
              <div class="form-control">
                <input
                  id="yrkeserfaring"
                  type="text"
                  class="input"
                  placeholder="Yrkeserfaring"
                  value=""
                />
                <small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="kurs"
                  type="text"
                  class="input"
                  placeholder="Kurs/etterutdannelse"
                  value=""
                /><small>Feilmelding</small>
              </div>
              <div class="form-control">
                <input
                  id="annet"
                  type="text"
                  class="input"
                  placeholder="Andre opplysninger"
                  value=""
                /><small>Feilmelding</small>
              </div>
            </div>
            <div class="kompetanse">
              <textarea
                id="kompetanse"
                placeholder="Kompetanse"
                value=""
              ></textarea>
            </div>
            <button
              type="submit"
              onclick="printetekst();"
              id="openBtn"
              class="custom"
            >
              Send inn cv
            </button>
          </form>
        </div>
user_143893310
Related