Flexbox properties are being ignored by input fields

Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as expected. All the input fields end up in a single column and input sizing is not applying properly.

Any ideas on what might be causing this issue?

Thank you!

* {
    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>

htmlcss

Answer №1

In order to keep your HTML structure intact, I made a slight adjustment where you had used display:flex. The display:flex property only applies to immediate children and not sub-children, so since the immediate child of .survey-questions was a <form>, and <div> elements were children of the <form>, I added "form" to your existing selector and included the additional attribute flex-wrap:wrap to maintain the desired row and column layout.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Minor modification here */
.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>

Answer №2

When the <form> element is the only child of your flex container, it becomes the only element affected by the flex properties. To achieve the desired behavior, consider moving the form outside the flex container.

* {
    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>

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

Is it possible to include parameters in an HTML GET request with Electron.Net?

I have successfully implemented a function in an Angular component within an Electron application using HttpClient: var auth = "Bearer" + "abdedede"; let header = new HttpHeaders({ "Content-Type": 'application/json&a ...

htmlangularelectron

Ways to Extract HTML DOM Attributes using Jquery

I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...

javascriptjqueryhtmlajaxdom

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

Creating a static website utilizing React. Description I am looking to incorporate a visual effect into the website pages, similar to the one demonstrated below. visual effect The goal is to design a rectangular background with triangles cut out from it ...

cssreactjsgraph

Tips for eliminating annoying white space on petite gadgets with css programming?

Having an issue with my static html page where I am seeing white space on the right side when checking responsiveness. I have tried multiple solutions found here on stack overflow, including adding the following code: I attempted to add this inline: html ...

htmlcss

AngularJS is used to vertically collapse three different div elements. This feature

I am facing an issue with the design of my page that contains three panels. Two of these panels have tables, and when viewing the page on a smaller display, it disrupts the layout. I am wondering if there is a way to add collapsible buttons to the panels s ...

htmlcssangularjs

Conceal the background of the lower div when the top div is displayed

I am struggling to figure out how to achieve this, or if it can even be done: <body> has a background image <div parent> has a background image <div child></div> does not have a background </div> My goal is to make the chi ...

htmlcss

Add option button

Is there a way to dynamically add radio buttons using jQuery or JavaScript and save the data into a database? I have successfully appended input types such as text, textarea, checkbox, and select with options. Here is my code: <!DOCTYPE html> < ...

javascriptphpjqueryhtmlmysqli

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

I have exhausted all options and tried various email hooks without success. I inherited an outdated PHP code that was developed by someone else, which I updated for new woocommerce hooks (since the code is 4 years old). Everything is functioning smoothly e ...

javascriptphphtmlwordpresswoocommerce

Having Trouble with the Spacing Between Navbar and Page Content in Bootstrap?

Let's tackle the issue at hand: Here is the code snippet. A lot of it has been borrowed from examples and tutorials. <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <!-- Brand a ...

htmlcsstwitter-bootstrap

Adjusting value of one input field according to the content of another text field in an

Just starting out with Angular and I am looking to dynamically change the value of a hidden input field called 'cc_card' based on the first digit entered in another input field called 'cc_number'. For example, if the user enters 5 in &a ...

javascriptjqueryhtmlangularjs

Unneeded return is necessary when utilizing recursion and restarting the application

Recently, I successfully recreated the 2048 game in Java, which was a pleasant surprise to me as I didn't expect to create something this "advanced." During the game, when tiles are moved, a new square/tile/number needs to be generated. To find an av ...

javacssrecursionjavafxreturn

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

javascripthtmlbuttontoggle

Comparing attribute selectors to class selectors in the realm of styling

I often come across code that looks like this: <input type="text" class="class1" name="text"> <input type="submit" class="class2" name="submit"> which is then styled as follows: input[type=text] { styles here...} input[type=submit] { sty ...

cssclassattributescss-selectors

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

javascriptjquerycssresizablejquery-ui-resizable

Although AJAX $.post functions properly in the View, it seems to encounter issues when relocated to a separate .js file. Interestingly, all other JQuery functions work

I have recently delved into MVC, JQuery, and AJAX, and encountered a perplexing issue. After completing the initial development of a practice website, I dedicated time to enhance the interactivity using JQuery. Everything was functioning smoothly until I ...

javascriptjqueryhtmlajaxasp.net-mvc-5

Retrieve the child element index of a specific element using jQuery

I am dealing with a group of 'DIV' elements, each containing a list of 'p' elements. Take a look at the example below: <div class="container"> <p>This is content 1</p> <p>This is content 2</p> ...

jqueryhtml

Retrieving data from a <div> element within an HTML string using jQuery and AJAX

Having trouble extracting a value from a div within an HTML string. Seeking assistance in identifying the issue. I've attempted various methods to retrieve the data, but none seem to work for me. It appears I may be overlooking something crucial. $( ...

javascriptjqueryhtmlajax

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

javascriptjqueryhtmlcss

What is the best way to ensure a div container fills the entire height of the screen?

I am currently working on developing my very first iOS HTML5 app, which is a simple quote application. One challenge I am facing is how to set the height of my container div to match that of an iPhone screen. You can view the design I have so far on this j ...

htmlcss

Problem arises when the DIV elements are not expanding horizontally together

Struggling to create a round corner box using divs. I have been working on it all day and can't figure out what I'm missing. If anyone could help me spot the issue, that would be great. I want the 'header' and 'footer' to exp ...

phpcssxhtmlhtmlalignment