I need assistance with creating a bootstrap form that is visually appealing on both web and mobile platforms. The standard markup doesn't seem to be working effectively. This is an angular application, but I don't believe angular is causing the issue...
One of the problems I am facing is when I try to group multiple fields within a div to add a background color, the fields overflow and extend beyond the left side of the div.
Another related issue is that on mobile devices, the fields have 0px left and right margins, giving it an unattractive appearance.
Here is the current markup:
in index .html:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My BS App</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">My BS App</h3>
</div>
<div class="row">
<div class="col-md-6">
<div ng-view></div>
The angular view directive is causing the form to appear as follows...
<form class="form-horizontal" name="parentForm" role="form" novalidate mb-submit="save()">
<fieldset>
<div ng-repeat="parent in family.parents()">
<legend>{{parent.firstName}} {{parent.lastName}}</legend>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
<input type="checkbox" ng-checked="parent.list" ng-model="parent.list">List parent</input>
</div>
</div>
</div>
</div>
<div style="background-color:red;">Why am I unable to contain the following?
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
As a result, the fields overflow to the left side. See the issue below:
On Web....
As for the appearance on mobile devices...