CODEWITHSUNDEEP
htmlcssangularjsformstwitter-bootstrap-3
Neman
Neman

Reputation: 379

Inline form in one row with labels above input fields

I'm building a web app using angularjs and bootstrap 3 as a css (I have very limited knowledge of css). I'd like to create an inline form with 5 input fields and labels to be positioned on top of them. First field needs to occupy more space than the others.

I have a plnkr with my attempt here: http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview

And here is the markup with what I tried:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">

  <div class="form-group col-md-4">
    <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
  </div>
  <div class="form-group col-md-4">
    <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
    <input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
  </div>
  <div class="form-group col-md-3">
    <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
    <select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
    </select>
  </div>
  <div class="form-group col-md-4">
    <label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
    <input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
    />
  </div>
  <div class="form-group col-md-3">
    <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
    <select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
    </select>
  </div>
  <div class="row align-center">
    <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
  </div>
</form>

This is how the current plnkr renders the markup: Current state

Upvotes: 5

Views: 13430

Answers (4)

Devin
Devin

Reputation: 7720

You only need to use the grid as intended, always keeping in mind the total sum of columns must be 12. So, in your example, you could use something like this. Note how I also grouped the similar areas of your form by offsetting the columns:

<div class="container">
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="row">

  <div class="col-md-6">
  <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
  </div>
  <div class="col-md-3">
  <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
    <input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
  </div>
  <div class="col-md-3">
   <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
    <select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
    </select>
  </div>

</div>
<div class="row">
  <div class="col-md-3 col-md-offset-6"><label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
    <input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
    /></div>
  <div class="col-md-3"> <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
    <select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
    </select></div>
  </div>
  <div class="row align-center">
    <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
  </div>
  </form>
 </div>

Now some minimal CSS for spacing and to make sure all elements behave the same:

label{display:block}
.control-label{padding-top:20px}
.align-center{text-align:center; padding:20px}
#location.form-control{width:100%}

of course you can style it at will. You can see the result here

Upvotes: 3

Mattias
Mattias

Reputation: 1131

Adding my comment as an answer, as I'm guessing it may be the solution.

You're using 4+4+3+4+3=18 columns. Limit these to span over a total of max 12. Decide which ones you can make smaller.

Upvotes: 3

Abhi
Abhi

Reputation: 4261

Can you try wrapping your labels and inputs inside a div and try. Like:

<div class="form-group col-md-4">
  <div>
    <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
  </div>
  <div>
    <input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
  </div>
</div>

Upvotes: 0

ArinCool
ArinCool

Reputation: 1738

Would you like something like this:

http://plnkr.co/edit/jWZMxIZEoBGuzjHgIiFq?p=preview

This is the code:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {

        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
      .form-group {
        float:left;
        margin: 1.2em;
      }
    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <form name="form" novalidate="" ng-submit="processForm()"
        class="form-inline">

      <div class="form-group col-md-4">
        <label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
        <br/><input class="form-control" id="location" name="location" type="text" ng-model="location"
               ng-required="true"
               ng-autocomplete details="details" options="options" placeholder="Location"/>
      </div>
      <div class="form-group col-md-4">
        <label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
        <br/><input class="form-control" id="startDate" name="startDate" type="text"
               datepicker-popup="{{format}}"
               ng-model="startDate"
               is-open="openedStart" datepicker-options="dateOptions"
               ng-required="true" close-text="Close" ng-click="openStart($event)"/>
      </div>
      <div class="form-group col-md-3">
        <label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
        <br/><select class="form-control" id="startTime" ng-model="selectedStartTime"
                ng-options="time.label for time in times"
                ng-required="true">
        </select>
      </div>
      <div class="form-group col-md-4">
        <label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
        <br/><input class="form-control" id="endDate" name="endDate" type="text"
               datepicker-popup="{{format}}"
               ng-model="endDate"
               is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions"
               ng-required="true" close-text="Close" ng-click="openEnd($event)"/>
      </div>
      <div class="form-group col-md-3">
        <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
        <br/><select class="form-control" id="endTime" ng-model="selectedEndTime"
                ng-options="time.label for time in times"
                ng-required="true">
        </select>
      </div>
    <!--</div>-->
    <div class="row align-center">
      <input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled"/>
    </div>
  </form>
    </div>
    <!-- /container -->
  </body>

</html>

Upvotes: 0

Related Questions