Search code examples
asp.net-mvctwitter-bootstraprazortwitter-bootstrap-3grid

Layout controls of a large form centered individually per each row size

I have a form that contains a large amount of fields a user have to fill.

I want to group them 2-4 in a row. Each control may have different size and the labels should appear to the control's left.
The controls should be centered horizontally, and shouldn't take up unoccupied space, just the space needed.

Here's an example of what I need:

            First Name: ▓▓▓▓▓▓▓▓       Last name: ▓▓▓▓▓▓▓▓      Gender: ▓▓▓▓▓

                 Telephone: ▓▓▓▓▓▓▓▓     Cell: ▓▓▓▓▓▓▓▓    Email: ▓▓▓▓▓▓▓▓

                             Address: ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

I tried using form-inline with and without combination of container, and I can't get it to work.

Here's a little snippet off my form, unfortunately it's razor and I can't get to test it on jsFiddle, but here is a sample output anyway.

<div class="container center-block">
  <h4>Patient</h4>
  <hr />
  @Html.ValidationSummary(true, "", new { @class = "text-danger" })
  @Html.HiddenFor(model => model.Id)

  <div class="row">

    <div class="form-group">
      @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EnumDropDownListFor(model => model.Gender, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group">
      @Html.LabelFor(model => model.Passport, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.Passport, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Passport, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-3" })
      <div class="col-md-3">
        @Html.EditorFor(model => model.BirthDate, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
      </div>
    </div>
  </div>
</div>

Here's how it's rendered:

I've tried few more things, but I don't know what's unlocking secret that makes an individual row independent in the other rows and applying the following rules to its controls, disregarding the form settings:

  • Horizontal form so that each control's label is to its right
  • Multiple form-groups per row
  • Center the controls stack horizontally, not widening them to occupy all available space
  • Adjust outer width according to the widest row, and then align form to left
  • Have the columns inside the row be completely independent to other rows

Any reference to an in-depth tutorial will really be appreciated!

Solution

  • The only part I didn't totally complete was to align the form to the left. I think I've gotten everything else you asked for. http://www.minimit.com/demos/bootstrap-3-responsive-centered-columns will give you a basis for understanding centered columns. Good luck!

    Copy this to style.css in a new Plunk.

    .row-centered {
    text-align:center;
}
.control-label{padding: 20px;}
form  { display: table;
}
h1 {
    margin:40px 40px 20px 40px;
      color:#95c500;
    font-size:28px;
    line-height:34px;
    text-align:left;
}

    Then Copy this to the Index.html:

    <!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="ExampleController">
  <h1>Patient</h1>
  <div class="container" align="left">
    <form class="form-inline row-centered">

      <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="" />

      <div class="row">
        <div class="form-group">
          <label class="control-label " for="  FirstName">FirstName</label>
          <input class=" form-control text-box single-line" data-val="true" data-val-length="The field FirstName must be a string with a minimum length of 2 and a maximum length of 32." data-val-length-max="32" data-val-length-min="2" data-val-required="The FirstName field is required."
          id="FirstName" name="FirstName" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
          <label class="control-label" for="  LastName">LastName</label>
          <input class="form-control text-box single-line" data-val="true" data-val-length="The field LastName must be a string with a minimum length of 2 and a maximum length of 32." data-val-length-max="32" data-val-length-min="2" data-val-required="The LastName field is required."
          id="LastName" name="LastName" type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
        </div>
        <div class="form-group">
          <label class="control-label" for="  Gender">Gender</label>
          <select class="form-control" data-val="true" data-val-required="The Gender field is required." id="Gender" name="Gender">
            <option selected="selected" value="0">Male</option>
            <option value="1">Female</option>
          </select> <span class="field-validation-valid text-danger" data-valmsg-for="Gender" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
          <label class="control-label" for="  Passport">Passport</label>
          <input class="form-control text-box single-line" data-val="true" data-val-length="The field Passport must be a string with a minimum length of 5 and a maximum length of 12." data-val-length-max="12" data-val-length-min="5" id="Passport" name="Passport"
          type="text" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="Passport" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
          <label class="control-label" for="  BirthDate">BirthDate</label>
          <input class="form-control text-box single-line" data-val="true" data-val-date="The field BirthDate must be a date." data-val-range="The field BirthDate must be between 01/01/1915 12:00:00 AM and 01/01/2035 12:00:00 AM." data-val-range-max="01/01/2035 00:00:00"
          data-val-range-min="01/01/1915 00:00:00" data-val-required="The BirthDate field is required." id="BirthDate" name="BirthDate" type="date" value="" /> <span class="field-validation-valid text-danger" data-valmsg-for="BirthDate" data-valmsg-replace="true"></span>
        </div>
      </div>

    </form>
  </div>


</body>

</html>

    Here is my output:

    • Horizontal form so that each control's label is to its left: (you said left in one place and right in another). It's easy to change.
    • Multiple form-groups per row: Put your entire form into a single "row" class and let the page width responsively determine how many form groups fit.
    • Center the controls stack horizontally, not widening them to occupy all available space: See the output above, or Copy my code to a plunk and see the output there.
    • Have the columns inside the row be completely independent to other rows
    • Any reference to an in-depth tutorial will really be appreciated! Check out the following: http://www.minimit.com/demos/bootstrap-3-responsive-centered-columns