Trying to position form input fields in columns of 3

Question

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>

Maybe use css grid? https://www.w3schools.com/css/css_grid.asp — Kielstra, Nov 23 '20 at 16:57
@Kielstra I can try, but from what i have read people usually sugest usung flexbox, only problem is that i cant figure out how to implement it. — theaspirator, Nov 23 '20 at 17:05
Flexbox is also an option, yes. If I were you I would look up a tutorial. I find this source really useful as well: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. I know it can be daunting to have to rewrite quite a big piece of html, but that's how it goes sometimes. You can't expect anyone here to just do all that work for you tbh. — Kielstra, Nov 23 '20 at 17:11
There are also a lot of CSS "games" that look silly, but are a pretty easy way to get a grasp on concepts like flexbox and grids, for example: https://flexboxfroggy.com/ — Kielstra, Nov 23 '20 at 17:12
@Kielstra Thanks for the tip, i will take a look at the tutorial. — theaspirator, Nov 23 '20 at 17:14

score 1 · Accepted Answer · answered Nov 23 '20 at 17:12

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>

Thanks, i will try and see, one question. What does it mean to reset my css? — theaspirator, Nov 23 '20 at 17:22
HTML tags by default have some styles applied so it's a good practice to remove them. https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do — Filipe, Nov 23 '20 at 17:27
Oh ok, i have that in my code but did not include it here, tried to only include whats most necessary. But when i tried your code in jsfiddle it worked. I will try to implement it in my code. Thank you for the help. — theaspirator, Nov 23 '20 at 17:34
If it help give a upvote in my answer, it could help someone too. You're welcome! — Filipe, Nov 23 '20 at 17:55
I have a question, is it the code inside the form-inputs that makes it work? — theaspirator, Nov 23 '20 at 18:31
The style associated with the .form-inputs make him a display flex, so all of the childs will be added in a row by default and the flex-wrap will make that row break. The three inputs will stay side by side because of the width: 33.33% in the .form-control. Change this width and you will see how it works, if you want only one input per row you can put with to 100%, two inputs 50%, etc.. — Filipe, Nov 23 '20 at 19:17
It worked, i put the helper div so that it covers the first 6 input fields and they are displaying correctly. Now i have to figure out how to display the ones that dont have the form control class 100% width,it seems like it is affecting them even though i put them in a different class with 100 width lol Thank you so much for the help @filipe — theaspirator, Nov 23 '20 at 19:28

Trying to position form input fields in columns of 3

1 Answers1