locked
Multiple fields on one row on the page RRS feed

  • Question

  • User483055775 posted

    I know how to do this using bootstrap on web forms but here in the app I am building (came from web matrix - now moved to vs2013) - I want an entry form with multiple fields on one line- i.e.

    First Name:  __________    Middle Name: ____________  Last Name: __________________

    Street Address _____________    City: ______________  State: ________________  Zip: ____________

    No matter what i do, this ends up 

    First Name: _____________

    Middle Name: _____________

    Last Name: ___________-

    etc. etc.

    Thanks 

    DonnieS

    Sunday, June 22, 2014 2:58 PM

Answers

  • User1526116210 posted

    DonnieS

    So bootstrap can do everything except the one thing that is most common on a regular form entry screen.

    Bootstrap can do what you need in this situation without custom CSS. As a developer you need to be able to think of creative solutions to things so don't always rely on bootstrap. As mike said, bootstrap is a starting point, not a solution for everything.

    To answer your question, to get the proper layout for your form just use bootstrap's grid system

    <form role="form">
        <div class="row">
            <div class="form-group col-sm-4">
                @* input for first name *@
            </div>
            <div class="form-group col-sm-4">
                @* input for middle name *@
            </div>
            <div class="form-group col-sm-4">
                @* input for last name *@
            </div>
        </div>
    <div class="row">
    <div class="form-group col-sm-3">
    @* input for address *@
    </div>
    <div class="form-group col-sm-3">
    @* input for city *@
    </div>
    <div class="form-group col-sm-3">
    @* input for state *@
    </div>
    <div class="form-group col-sm-3">
    @* input for zip *@
    </div>
    </div>
    <input class="btn btn-default btn-block" type="submit"> </form>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 1, 2014 5:24 PM
  • User-1454326058 posted

    Hi DonnieS,

    As mhcodner said that you could use grid system.

    For your requirement, the code could be like this:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <form role="form">
        <div class="row">
            <label for="firstName" class="col-sm-1 control-label">First Name:</label>
            <div class="form-group col-sm-3">
                <input type="text" class="form-control" id="firstName" />
            </div>
            <label for="middleName" class="col-sm-1 control-label">Middle Name:</label>
            <div class="form-group col-sm-3">
                <input type="text" class="form-control" id="middleName" />
            </div>
            <label for="lastName" class="col-sm-1 control-label">Last Name:</label>
            <div class="form-group col-sm-3">
                <input type="text" class="form-control" id="lastName" />
            </div> 
        </div>
        <div class="row">
            <label for="streetAddress" class="col-sm-1 control-label">Street Address:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="streetAddress" />
            </div>
            <label for="city" class="col-sm-1 control-label">City:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="city" />
            </div>
            <label for="state" class="col-sm-1 control-label">State:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="state" />
            </div> 
            <label for="zip" class="col-sm-1 control-label">Zip:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="zip" />
            </div> 
        </div>
        <input class="btn btn-default btn-block" type="submit"/>
    </form>
    </body>
    </html>

    Thanks

    Best Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 3, 2014 5:39 AM

All replies

  • User-821857111 posted

    I know how to do this using bootstrap on web forms

    You would do exactly the same thing in MVC or Web Pages: http://getbootstrap.com/css/#forms-inline

    Sunday, June 22, 2014 5:38 PM
  • User483055775 posted

    This example , the #forms-inline doesnt appear to fit the form I have drawn in my OP, its more a one line - type of form, which in the real world, I may never have seen.  The example I have above is the normal data entry type of form.  And with all the examples they list, that one is not there.

    DonnieS

    Monday, June 30, 2014 1:19 PM
  • User-821857111 posted

    You need to apply your own CSS to control the positioning.

    Monday, June 30, 2014 3:10 PM
  • User483055775 posted

    So bootstrap can do everything except the one thing that is most common on a regular form entry screen.   Thanks Mike - appreciate your help and your time.

     

    DonnieS

    Monday, June 30, 2014 3:15 PM
  • User-821857111 posted

    Bootstrap is just a starting point. It is not the sole answer to everything. No framework is.

    Monday, June 30, 2014 3:46 PM
  • User1526116210 posted

    DonnieS

    So bootstrap can do everything except the one thing that is most common on a regular form entry screen.

    Bootstrap can do what you need in this situation without custom CSS. As a developer you need to be able to think of creative solutions to things so don't always rely on bootstrap. As mike said, bootstrap is a starting point, not a solution for everything.

    To answer your question, to get the proper layout for your form just use bootstrap's grid system

    <form role="form">
        <div class="row">
            <div class="form-group col-sm-4">
                @* input for first name *@
            </div>
            <div class="form-group col-sm-4">
                @* input for middle name *@
            </div>
            <div class="form-group col-sm-4">
                @* input for last name *@
            </div>
        </div>
    <div class="row">
    <div class="form-group col-sm-3">
    @* input for address *@
    </div>
    <div class="form-group col-sm-3">
    @* input for city *@
    </div>
    <div class="form-group col-sm-3">
    @* input for state *@
    </div>
    <div class="form-group col-sm-3">
    @* input for zip *@
    </div>
    </div>
    <input class="btn btn-default btn-block" type="submit"> </form>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 1, 2014 5:24 PM
  • User-1454326058 posted

    Hi DonnieS,

    As mhcodner said that you could use grid system.

    For your requirement, the code could be like this:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    </head>
    <body>
        <form role="form">
        <div class="row">
            <label for="firstName" class="col-sm-1 control-label">First Name:</label>
            <div class="form-group col-sm-3">
                <input type="text" class="form-control" id="firstName" />
            </div>
            <label for="middleName" class="col-sm-1 control-label">Middle Name:</label>
            <div class="form-group col-sm-3">
                <input type="text" class="form-control" id="middleName" />
            </div>
            <label for="lastName" class="col-sm-1 control-label">Last Name:</label>
            <div class="form-group col-sm-3">
                <input type="text" class="form-control" id="lastName" />
            </div> 
        </div>
        <div class="row">
            <label for="streetAddress" class="col-sm-1 control-label">Street Address:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="streetAddress" />
            </div>
            <label for="city" class="col-sm-1 control-label">City:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="city" />
            </div>
            <label for="state" class="col-sm-1 control-label">State:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="state" />
            </div> 
            <label for="zip" class="col-sm-1 control-label">Zip:</label>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" id="zip" />
            </div> 
        </div>
        <input class="btn btn-default btn-block" type="submit"/>
    </form>
    </body>
    </html>

    Thanks

    Best Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 3, 2014 5:39 AM