Single-line form with labels positioned above the input fields

For my web app project, I am using AngularJS and Bootstrap 3 for CSS (although my CSS knowledge is limited). I am trying to design an inline form with 5 input fields and labels positioned on top of them. The first field should take up more space than the others.

You can view my attempt on Plnkr here: http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview

Below is the markup code I have 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 displays the layout:

htmlcssangularjsformstwitter-bootstrap-3

Answer №1

My solution is to combine my comment with an answer, as it seems like a possible resolution.

Your current layout consists of 4+4+3+4+3=18 columns. I suggest limiting this total to a maximum of 12 columns by determining which ones can be reduced in size.

Answer №2

To ensure proper use of the grid, always remember that the total sum of columns should be 12. In your case, you can structure it like this by grouping similar form sections and offsetting 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>

Here's some basic CSS for spacing and consistency among elements:

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

Feel free to customize the styling. You can view the end result here

Answer №3

Is this something you're looking for?

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

Here is the provided code snippet:

<!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>

Answer №4

Have you considered organizing your labels and inputs within a div element? You could give it a try with this structure:

<div class="input-wrapper col-md-6">
  <div>
    <label class="form-label" for="name"><i class="fas fa-user"></i> Name</label>
  </div>
  <div>
    <input class="form-input" id="name" name="name" type="text" ng-model="name" required placeholder="Enter your name" />
  </div>
</div>

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

`Switching the selection in ng-selected`

I am having trouble toggling ng-selected options in Angular. I have tried the following approach: <select ng-model="datacut.ages" multiple> <option value="" disabled="disabled">Please Select</option> <option value="0-15" ng-clic ...

javascriptangularjsangular-ngmodel

AngularJS: Substates not rendering properly

I'm encountering issues while trying to incorporate nested states in my project. Although the View template and JavaScript calls are being made and loaded, the screen is not changing - in other words, the nested screen is not displaying. http://{dom ...

javascriptangularjshttpangular-ui-routersingle-page-application

Angular Material Rotate Ink Bar to Vertical Orientation

After wanting to change the orientation of Angular Material's Tab Component to vertical, I visited this page (Tabs) and experimented with the CSS. By making the necessary adjustments, I successfully displayed the tabs vertically using the following CS ...

cssangularangular-materialmaterial-design

Accessing the background page of a Chrome extension while it's in operation

I am in the process of developing my first chrome extension that allows youtube.com/tv to run in the background so it can be accessed easily on a phone or tablet. Everything is working fine, except for the fact that if I want to watch the video and not j ...

javascripthtmljsongoogle-chrome-extensionmanifest

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Does anyone know of a CSS selector that can be used when JavaScript is disabled? I'm not referring to the noscript tag, but specifically in CSS. ...

csscss-selectors

"Exploring How to Manually Change a Tab Page in

I created a tabs page that contains five different tabs. Typically, the user can navigate to these tabs by clicking on their respective tab icons. However, I want to implement a feature where the user can manually change tabs by clicking on a button loca ...

angularjscordovaionic-frameworktabs

Subscribe on Footer triggers automatic scrolling to the bottom of the page

Whenever I fill out the form in the footer and hit submit, it directs me to a different page while automatically scrolling back down to the footer. I'm looking for a solution that prevents this automatic scrolling. I've attempted using window.sc ...

javascripthtmlcss

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

Utilizing AngularJS to create a dynamic autocomplete feature with data sourced

I'm currently implementing an autocomplete feature using the REST Countries web service. The goal is to provide suggestions as the user starts typing in an input field, and once a country is selected, display information about it. I am considering usi ...

angularjshtmlapi

Enhancing form validations in Rails using Ajax and error_message_on

I'm currently working on implementing ajax validations in my form, but I've encountered some difficulties. Within my form, I have code similar to the following: <% form_for @user, :html => { :id => 'user_form', :multipart =&g ...

ruby-on-railsajaxvalidationformsrjs

Concealing sections in angular ui.grid by leveraging bootstrap functionality

I'm trying to implement ui-grid in angular js and experimenting with hiding columns using bootstrap classes. For example, imagine a table with 100 columns but on mobile devices, I only want to display 3 of them. Here is a plunker link showcasing my c ...

angularjsangular-ui-bootstrapangular-ui-grid

This issue arises when using AngularFire for an AngularJS voting application, where the app is unable to properly

When using ng-repeat to display array data from Firebase, I am facing an issue with counting the votes for each quote. Despite my attempts to iterate through the data, the result always comes back as undefined. My Markup <div ng-repeat="q in quote ...

angularjsfirebasefirebase-realtime-databaseangularfireangularfire2

Transform a date string into a date entity

Collecting the user's input for the date and saving it as a string variable. The format of the value is Fri Aug 27 2021 00:00:00 GMT+0530 (India Standard Time) My goal is to convert this string back into a new Date() object in order to make additiona ...

javascriptangularjsangular

Redirecting script upon successful connection detection

I have created a script that checks for internet connectivity using an image, and redirects if internet is available. However, the issue is that it caches the images, leading to attempts to load them even when offline. Is there a different approach I can ...

javascripthtml

Display the content of an md-dialog with a scroll bar

I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...

cssangularprintingmaterial-designangular-material

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

htmlcss

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

Can this carousel be configured to show just 2 pictures at a time instead of 3? Check out the live demo here. I've attempted adjusting the columns to col-md-6 and the CSS to 50%, but haven't had any success... ...

jquerycsstwitter-bootstrap-3carousel

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

As I was going through the CKEditor tutorial, I implemented the following: $( '#editor' ).ckeditor(function(){}); //it's working great!! However, after submitting the form, I noticed that by default, the textarea displays <p></p ...

javascripthtmlcssckeditor

The "add to cart" button is unresponsive

My issue is that the add to cart button on my website is not responding properly. I have implemented JavaScript on the add to cart button, where I have assigned an attribute called data-product with a value of {{product.id}}. var updateBtns = document.g ...

javascripthtmlcssdjango

Various instances of controllers in Angular.js and JavaScript

I'm facing a challenge with a view that has two identical parts but different content. I want to find a way to use one controller and one view for both the left and right parts. Here's what I currently have in my HTML: <div class="board_bod ...

javascriptangularjs