Attempting to arrange form input fields into groups of three columns

I am facing a challenge in arranging my input fields within the form in a column of 3. The issue is that I have more code than anticipated, making it difficult to achieve this layout. Despite several attempts, nothing seems to be working. I have spent hours trying to resolve this but with no success. Any assistance would be greatly appreciated. Thank you 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>

htmlcssformsflexbox

Answer №1

Check out this solution for your issue. I have introduced a helper div called .form-inputs and applied display flex with the flex-wrap property set to wrap. Additionally, I adjusted the width of the .form-control to 33.3333%. Certain CSS properties were also removed.

Note: Make sure to reset your CSS styles for this to work correctly.

* {
  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>
             // More form control elements here
            </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: Managed to get it done using position absolute and @media screen for image size and padding adjustments, but I believe ...

htmlcsstwitter-bootstrap-3flexboxdisplay

What methods can be used to test scss subclasses within an Angular environment?

Exploring different background colors in various environments is a task I want to undertake. The environments include bmw, audi, and vw, with each environment having its own unique background color. Need help writing an Angular test for this? How can I mod ...

cssangulartypescriptunit-testingangular-test

Ways to display a series of images side by side to fill the entire width consistently

I need a solution to display multiple images in a box, all set to the same height and width of 154px x 125px. While this can be achieved, the issue arises when there isn't enough space for the final image, leaving blank areas. Is there a way to make t ...

htmlcssresponsive-design

Ensuring Uniform Column Height in Bootstrap 4 - Preventing Buttons from Being Forced to the Bottom of

Using the Bootstrap 4 class 'h-100' to ensure equal height for all three columns, I encountered an issue where the buttons that were initially aligned to the bottom of each div are no longer in correct alignment. How can I maintain button alignme ...

htmltwitter-bootstrapcssbootstrap-4

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

javascripthtmlreactjs

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

Displaying an HTML file in a Node and Express application using JavaScript File handling

Starting my first Node, Express & Angular project has been a bit tricky due to issues with the asset pipeline. I'm not entirely sure if it's related to my folder structure, which I tried setting up based on online tutorials but am open to suggest ...

javascripthtmlangularjsnode.jsexpress

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

cssresponsive-designflexboxgrid-system

How come the hidden container does not reappear after I click on it?

I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...

javascriptjqueryhtmlcss

Tips for generating multiple URL destinations within a single hyperlink

I am looking to create a unique feature in HTML where multiple tabs can be opened with different URLs using one link. While I know how to open one link in a new tab, I am unsure of how to simultaneously add another URL that will open up in a separate tab ...

htmlhref

Ways to split up array objects in an axios GET request

Hello, I recently implemented an AXIOS GET request that returns an array of objects. However, the current example I am using retrieves the entire array at once, and I need to separate the objects so that I can work with them individually. class CryptoAP ...

javascripthtmlreactjsapiaxios

How to align content within a FormControlLabel using Material UI

My goal is to line up the label and radio button inside a FormControlLabel component so that the label occupies the same width regardless of its content. The current appearance can be seen below: https://i.stack.imgur.com/GhXed.png Below is the code I am ...

cssreactjsmaterial-ui

Unusual scroll bar movements when using jQuery validation

When I click the Add Dependent link button, I wanted the scroll bar to automatically scroll to the bottom, and it does just that. However, there is a small issue after the postback where the text "Please fix the following problems:" briefly appears, even t ...

c#javascriptasp.netcssjquery-validate

applying custom font to select boxes in bootstrap

Trying to style the select option text using a Poppins font with the following class: .poppinsregular14diese00000061 { font-family: Poppins; font-weight: 400; font-size: 14px; color: #00000061; } You can view the implementation in this fi ...

cssbootstrap-4

What is the method to activate sequential selection through JSON response?

I just started exploring angularjs and I'm interested in selecting values step by step. But first... Here's the JSON response I received: [ { "countryname": "India", "states": [ { "statename": "Karnataka", ...

htmlangularjsjson

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

I find it puzzling why the alignment between Bootstrap buttons within the Angular 2 CLI project is not working as expected. To address this issue, I followed the instructions to create a new Angular 2 CLI app outlined here: https://angular.io/guide/quicks ...

htmlcssangularbootstrap-4

Exploring the differences between Zurb Foundation 6's app.scss and _settings.scss files

Can you explain the distinction between app.scss and _settings.scss when using Zurb Foundation 6? ...

htmlcsszurb-foundationzurb-foundation-6

I seem to be having trouble with my JavaScript code when attempting to search for items within

I want to implement an onkeyup function for a text input that searches for patient names from column 2 in my table. However, it seems to be not working properly as I don't get any results in return. Below are the snippets of what I have done so far. ...

javascripthtml

navigating between html pages using sliding next and previous buttons

I am in the process of developing a multi-page form spread across 4 different pages. I would like to incorporate next and previous buttons to allow users to easily navigate through the form. Although I have tried looking online for solutions, most results ...

javascriptjqueryhtmlcss

Several DIVs with the same class can have varying CSS values

I am looking to modify the left-margin value of various separate DIVs using JavaScript. The challenge is: I only want to use a single className, and I want the margin to increase by 100px for each instance of the class. This way, instead of all the DIVs ...

javascripthtmlcssgetelementsbyclassnamemargin-left