I acurrently have two input controls on the same line however they do not seem to align properly with the other controls above it and it looks rather off. I am not sure how to get them to align properly. Here is what the modal currently looks like: http://gyazo.com/4060e39e20391f1e9561e654dc64f9bb It's almost there but not quite there yet. Here is the HTML that I have writtem
<div id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true">
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<div class="col-md-5">
<label class="col-md-4 control-label" for="valueMin">Value Range:</label>
<div class="col-md-8">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false">
</div>
</div>
<div class="col-md-2">
<p>-</p>
</div>
<div class="col-md-5">
<div class="col-md-8">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
and here is my css that was auto generated when created my MVC project in visual studio
input,
select,
textarea {
max-width: 280px;
}
It is good practice to use rows when making columns.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
I have fixed your code in a pen.
http://codepen.io/costh/pen/XbzGxL
Looks like your columns are a bit confused...
Try this :
<div class="col-md-12" id="modalContent">
<div class="form-group">
<label class="col-md-2 control-label" for="datapointName">Name:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="Name" class="form-control" type="text" value="" name="tName" data-val-required="Name field is required" data-val="true" />
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="Desc">Description:</label>
<div class="col-md-10">
<div class="col-md-4">
<textarea id="Desc" class="form-control" type="text" value="" name="Desc" data-val="false"></textarea>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="code">code:</label>
<div class="col-md-10">
<div class="col-md-4">
<input id="code" class="form-control" type="text" value="" name="datapointOID" data-val-required="Code is a required field" data-val="true" />
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="metricType"></label>
<div class="col-md-10">
<div class="col-md-4">
<select id="metricType" class="form-control" name="metricType" data-val="false"></select>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
<div class="form-group">
<label class="col-md-2 control-label" for="valueMin">Value Range:</label>
<div class="col-md-10">
<div class="col-md-4">
<div class="col-md-5" style="padding-left:0px;">
<input id="valueMin" class="form-control" type="text" value="" name="valueMin" data-val="false" />
</div>
<div class="col-md-2">
<p style="text-align:center;">-</p>
</div>
<div class="col-md-5" style="padding-right:0px;">
<input id="valueMax" class="form-control" type="text" value="" name="valueMax" data-val="false" />
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<!-- /input-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" value="Save" class="btn btn-default btn-ok" id="savedp">Save</button>
</div>
</div>
Please excuse the in-line styles!
Try this:
<div class="col-md-5">
<div class="input-daterange input-group" id="valuerang">
<span class="input-group-addon">Value Range:</span>
<input class="input-sm form-control" name="start" type="text" id="abc" required> <span class="input-group-addon"> - </span>
<input class="input-sm form-control" name="end" type="text" id="abc" required>
</div>
</div>
make sure you modify the tag names to suit your application.
Related
I don't really understand the elements changes after add FORM.
Any suggestion?
BEFORE
AFTER add
{!! Form::model($user, ['method' => 'POST','route' => ['profile.update', $user->id], 'enctype' => 'multipart/form-data']) !!}
Full codes here:(
#include('Navigation.navbarhome')
<div class="container">
{!! Form::model($user, ['method' => 'POST','route' => ['profile.update', $user->id], 'enctype' => 'multipart/form-data']) !!}
#if ($message = Session::get('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</div>
#endif
#if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<h1>Edit Profile</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="/uploads/avatars/{{ Auth::user()->profImage }}" class="avatar img-circle" alt="avatar">
<h6>Upload your photo...</h6>
<input type="file" name="profImage">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</div>
</div>
<!-- edit form column -->
<div class="col-md-7 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">First name:</label>
<div class="col-lg-8">
<input class="form-control" name="fname" type="text" value="{{$user->fname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Last name:</label>
<div class="col-lg-8">
<input class="form-control" name="lname" type="text" value="{{$user->lname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Staff ID:</label>
<div class="col-lg-8">
<input class="form-control" name="StaffID" type="text" value="{{$user->StaffID}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" name="email" type="text" value="{{$user->email}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Department:</label>
<div class="col-lg-8">
<input class="form-control" name="dept" type="text" value="{{$user->department1->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Position:</label>
<div class="col-lg-8">
<input class="form-control" name="role" type="text" value="{{$user->position->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="submit" class="btn btn-primary" value="Save Changes">
<span></span>
<a href="/home2"> <input type="button" href="/home2" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
{!! Form::close() !!}
</div>
</div>
</div>
<hr>
This is occurring because there's already an existing <form> element within your code, and nesting these elements is causing issues within the styling.
You should be able to address it by simply changing your inner <form> element into a <div> since it isn't doing much except for handling styling (via the form-horizontal class).
Just change the following line from:
<form class="form-horizontal" role="form">
to:
<div class="form-horizontal" role="form">
Example (with changes applied)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- This element is added by Laravel -->
<form>
<h1>Edit Profile</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="" class="avatar img-circle" alt="avatar">
<h6>Upload your photo...</h6>
<input type="file" name="profImage">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</div>
</div>
<!-- edit form column -->
<div class="col-md-7 personal-info">
<h3>Personal info</h3>
<!-- Change this to a <form> to reproduce your original issue -->
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">First name:</label>
<div class="col-lg-8">
<input class="form-control" name="fname" type="text" value="{{$user->fname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Last name:</label>
<div class="col-lg-8">
<input class="form-control" name="lname" type="text" value="{{$user->lname}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Staff ID:</label>
<div class="col-lg-8">
<input class="form-control" name="StaffID" type="text" value="{{$user->StaffID}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" name="email" type="text" value="{{$user->email}}">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Department:</label>
<div class="col-lg-8">
<input class="form-control" name="dept" type="text" value="{{$user->department1->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Position:</label>
<div class="col-lg-8">
<input class="form-control" name="role" type="text" value="{{$user->position->name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="submit" class="btn btn-primary" value="Save Changes">
<span></span>
<input type="button" href="/home2" class="btn btn-default" value="Cancel">
</div>
</div>
</div>
</div>
</div>
<hr>
</form>
</div>
I'm trying to have a col-md-4 inside a col-md-12, but it is not working.
HTML:
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-md-12">
<input type="number" required="required" class="col-md-4" placeholder="Rule1" />
<input type="number" required="required" class="col-md-4" placeholder="Rule2" />
<input type="number" required="required" class="col-md-4" placeholder="Rule3" />
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
Does anyone know how can I put the Rules side by side in the row?
Thanks
use
<div class="col-xs-4"></div>
or "col-md-4" xs just to show in this tiny preview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-12 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule1" />
</div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule2" /> </div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule3" /> </div>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
</div>
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label>
<input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="annualeave">Annual Leave :</label>
<input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
This answer is different from the above answer given by Rafa Romero.
I have added different style for these.
Here is the 2 ways you can use this .
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<br><h1 class="text-center">OR</h1><br>
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" >
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
You are using bootstrap class so do one thing use columns and give .col-sm-8 and .com-sm-4 respectively and check.
<div class="form-group">
<label for="annualeave" class="col-sm-8">Annual Leave :</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</div>
You can try with absolute position for the texfields and aligning both at the same distance from the right or left side
input{
position: absolute;
left: 275px
}
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="currentmonth">Total Work days in Current Month:</label>
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
<div class="row">
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
Your labels are too lengthy, I've just changed the structure with center align, is this what you need ?
.form-group {
width:50%;
float:left;
padding:0 15px;
}
.form-group input {
float:left;
}
.form-group label {
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group" >
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div> </div>
</div>
</div>
I have removed all your inline styles. There is no need for every field styling. You can do it with bootstrap classes.
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center"><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"></label>
<div class="col-sm-6 text-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Add class form-inline to the form element
example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
reference: http://www.w3schools.com/bootstrap/bootstrap_forms.asp
Remove the form-inline class from the form tag.
i have a form within a panel in my html using bootstrap and it seems like all my panels are well adjusted except for the one which has date and the one used to upload files in it.
they have more width than the other form groups because of the button next to them. so my question is how can i modify it to get the same width as the other form groups.
<div class=" col-md-6 col-sm-6 ">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class=" col-md-3 col-sm-3 col-xs-3 ">
<font size="4" ></font>
</div>
<div class=" col-md-8 col-sm-8 col-xs-8 ">
<font size="6" >إضافـــــة أرشيــــف </font>
</div>
</div>
</div>
<br>
<form class="form-horizontal" id="form" action="/insertArchive/" method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
<label class="col-sm-4 control-label">إســـم اﻷرشيف</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">الرقم اﻹشاري</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="ref_num" id="ref_num">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">المجلد</label>
<div class="col-sm-6">
<select class="form-control" name="section_id" id="section_id">
{% for sectidon in list %}
<option value="{{sectidon.id}}">{{sectidon.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ملاحظات</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="text" id="text"></textarea>
</div>
</div>
<!-- test -->
<div class="form-group">
<label class="col-sm-4 control-label">الملحقات</label>
<div class="contacts col-sm-6">
<label>إصافة ملف :</label>
<div class="form-group multiple-form-group input-group file">
<input type="file" name="file[]" class="form-control" >
<input type="text" name= "file_name[]" class="form-control" >
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
</div>
</div>
</div>
<!-- test -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">حفـــظ</button>
</div>
</div>
</form>
</div>
</div>
Your problem is, that you have a .form-group class within a .form-group.
So change:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
to:
<div class="form-group">
<label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
<div class="col-sm-6">
<div class='input-group date' id='datetimepicker5'>
<!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
<input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Working example