CODEWITHSUNDEEP
htmlcss
Anon2945
Anon2945

Reputation: 55

Input fields not responding to flexbox

I want to create 9 input fields for a product calculator that I'm building. I want to have 3 rows of three columns. However, for some reason when I apply display: flex and flex-direction: row to the parent div this doesn't work. All my input fields are placed in a column regardless of flex-direction and input sizing doesn't work

What am I doing wrong?

Thanks.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.survery-questions {
    display: flex;
    flex-direction: row;
}

.home-price-footer {
    width: 25%;
    height: 45px;
    margin-bottom: 3em;
}


#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}
<html>
<head>
</head>
<body>
<div class="survery-questions">
        <form action="">
            <div class="price-form">
                <input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
            </div>
            
                   <div class="price-form">
                <input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
            </div>
                   <div class="price-form">
                <input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
            </div>
        
                </form>
       </div>
       
        </form>
       </div>
       
      </body>
      </html>

Upvotes: 2

Views: 1569

Answers (2)

Ritika Gupta
Ritika Gupta

Reputation: 376

Keeping your html intact, A little modification was needed where you gave display:flex, basically the display:flex works for immediate children only and not the the sub-children so immediate child of .survey-questions was <form> and <div> are children to <form> hence I added form to your existing selector and gave an additional attribute flex-wrap:wrap to maintain rows and columns layout as you had expected.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* just a little modification in this part */
.survery-questions form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
form > div{
    width: 33.3%;
}

.home-price-footer {
    width: 25%;
    height: 45px;
    margin-bottom: 3em;
}


#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}
<html>
<head>
</head>
<body>
<div class="survery-questions">
        <form action="">
            <div class="price-form">
                <input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
            </div>
            
                   <div class="price-form">
                <input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
            </div>
                   <div class="price-form">
                <input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>

            </div>
        
            <div class="phone-form">
                <input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
            </div>
        
            <div class="email-form">
                <input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
            </div>
        
                </form>
       </div>
       
        </body>
        </html>

Upvotes: 1

isherwood
isherwood

Reputation: 61083

The <form> element is the only child of your flex container, and is therefore the only element being influenced by it. By moving it outside the flex container things come closer to behaving as you'd like.

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

.survey-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* added */
}

.survey-questions > div {
    width: 33.33%; /* added */
    padding: 0 10px; /* added */
}

.home-price-footer {
    width: 100%; /* updated */

    height: 45px;
    margin-bottom: 3em;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}
<form action="">
    <div class="survey-questions">
        <div class="price-form">
            <input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>
        </div>

        <div class="phone-form">
            <input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
        </div>

        <div class="email-form">
            <input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
        </div>

        <div class="price-form">
            <input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>
        </div>

        <div class="phone-form">
            <input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
        </div>

        <div class="email-form">
            <input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
        </div>

        <div class="price-form">
            <input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>
        </div>

        <div class="phone-form">
            <input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
        </div>

        <div class="email-form">
            <input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
        </div>
    </div>
</form>

Upvotes: 0

Related Questions