I am using bootstrap and I have a div panel and after it a form, and I have this same structured element twice. The form and the panel dive after it are overlapping. Here is my html:
<div class="comment">
<div class="panel panel-default">
<div class="panel-heading">
user1
</div>
<div class="panel-body">
test comment
</div>
<div class="panel-footer">
<ul class="list-inline">
<li id="reply">reply</li>
<li id="expand"> expand</li>
</ul>
</div>
</div>
<form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Submit Comment" />
</div>
</form>
</div>
<div class="comment">
<div class="panel panel-default">
<div class="panel-heading">
user 2
</div>
<div class="panel-body">
test comment
</div>
<div class="panel-footer">
<ul class="list-inline">
<li id="reply">reply</li>
<li id="expand"> expand</li>
</ul>
</div>
</div>
<form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Submit Comment" />
</div>
</form>
</div>
and here is a fiddle to see what I mean by overlapping
I want the the width of the form to be limited, that is why i put class="form col-xs-4"
Use class="row" before use bootstrap col-*-* class
your code like
<div id="comment">
<div class="panel panel-default">
<div class="panel-heading">
user1
</div>
<div class="panel-body">
test comment
</div>
<div class="panel-footer">
<ul class="list-inline">
<li id="reply">reply</li>
<li id="expand"> expand</li>
</ul>
</div>
</div>
<div class="row">
<form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Submit Comment" />
</div>
</form>
</div>
</div>
<div id="comment">
<div class="panel panel-default">
<div class="panel-heading">
user 2
</div>
<div class="panel-body">
test comment
</div>
<div class="panel-footer">
<ul class="list-inline">
<li id="reply">reply</li>
<li id="expand"> expand</li>
</ul>
</div>
</div>
<div class="row">
<form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Submit Comment" />
</div>
</form>
</div>
</div>
your form is not in the right div. You put it after the footer of the first panel and before the following panel.
This solves it :
<div id="main">
<div class="panel panel-default">
<div class="panel-heading">
user1
</div>
<div class="panel-body">
<form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Submit Comment" />
</div>
</form>
</div>
<div class="panel-footer">
<ul class="list-inline">
<li id="reply">reply</li>
<li id="expand"> expand</li>
</ul>
</div>
</div>
</div>
<div id="comment">
<div class="panel panel-default">
<div class="panel-heading">
user 2
</div>
<div class="panel-body">
<form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Submit Comment" />
</div>
</form>
</div>
<div class="panel-footer">
<ul class="list-inline">
<li id="reply">reply</li>
<li id="expand"> expand</li>
</ul>
</div>
</div>
</div>
Be also careful, you had several div with the same id and this is not viable.
Please see Updated code.
https://jsfiddle.net/v5da7qeq/2/
Hope this will work !
If you opt for a full width form layout you can just remove the col-xs-4 class from your forms.
<form class="form" id="commentForm" action="comment.php" method="post" style="display:">
https://jsfiddle.net/Neviton/v5da7qeq/4/
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>
hii guys i have a code that consists of login and registration forms as a tabs when we clicked on either ones it goes on to that respective form but now I want to change it a bit by removing the Register tab and adding it as a signup button beside login button and in the register page i want to add login button when i click it its goes to login form vice-versa..
PS:- I am new to HTML and Bootstrap and i want this to be done in pure HTML r Bootstrap
here is the code of signup.html
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login-form" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="register-tab" data-toggle="tab" href="#register-form" role="tab" aria-controls="register" aria-selected="false">Register</a>
</li>
</ul>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="tab-content" id="myTabContent">
<form id="login-form" class="tab-pane show active" role="tabpanel" aria-labelledby="login-tab" action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="row logs">
<button class="loginBtn loginBtn--google" (click)="signInGoogle()" >Login with Google</button>
<button class="loginBtn loginBtn--facebook" (click)="signInFacebook()" >Login with Facebook</button>
<button class="loginBtn btn-linkedin" (click)="signInLinkedin()">
<span class="fa fa-linkedin"></span>
<span class="linkedtext">Login with LinkedIn</span>
</button>
</div>
</div>
</form>
<form id="register-form" class=" fade tab-pane " action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried many ways to do it but I couldn't come up.. if there is anyother way to do it please let me know thanks.
Jquery makes this really easy to do:
$(document).ready(function () {
$('#register-form').hide()
$('#register-tab').click(function () {
$("#login-form").hide();
$("#register-form").show();
})
$('#login-tab').click(function () {
$("#register-form").hide();
$("#login-form").show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login-form" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="register-tab" data-toggle="tab" href="#register-form" role="tab" aria-controls="register" aria-selected="false">Register</a>
</li>
</ul>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="tab-content" id="myTabContent">
<form id="login-form" class="tab-pane show active" role="tabpanel" aria-labelledby="login-tab" action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="row logs">
<button class="loginBtn loginBtn--google" (click)="signInGoogle()" >Login with Google</button>
<button class="loginBtn loginBtn--facebook" (click)="signInFacebook()" >Login with Facebook</button>
<button class="loginBtn btn-linkedin" (click)="signInLinkedin()">
<span class="fa fa-linkedin"></span>
<span class="linkedtext">Login with LinkedIn</span>
</button>
</div>
</div>
</form>
<form id="register-form" class=" fade tab-pane " action="#" method="post" role="form" >
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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.
<div class="" id="loginModal">
<div class="modal-header">
<h3>Have an Account?</h3>
</div>
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Create Account</li>
<li>Login as admin</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="login">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div id="legend">
<legend class="">Login</legend>
</div>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="username"></label>
<div class="controls">
<input type="text" id="username" name="username" placeholder="Username" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password"></label>
<div class="controls">
<input type="password" id="password" name="password" placeholder="Password" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-primary">Login</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="admin">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div id="legend">
<legend class="">Sign as admin</legend>
</div>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="username"></label>
<div class="controls">
<input type="text" id="adminname" name="adminname" placeholder="Username" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password"></label>
<div class="controls">
<input type="password" id="adminpassword" name="adminpassword" placeholder="Password" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-primary">Login</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="create">
<form id="tab">
<label>Username</label>
<input type="text" value="" class="input-xlarge">
<label>First Name</label>
<input type="text" value="" class="input-xlarge">
<label>Last Name</label>
<input type="text" value="" class="input-xlarge">
<label>Email</label>
<input type="text" value="" class="input-xlarge">
<label>Address</label>
<textarea value="Smith" rows="3" class="input-xlarge">
</textarea>
<div>
<button class="btn btn-primary">Create Account</button>
</div>
</form>
</div>
</div>
</div>
</div>
In this code i have three tabs ( login,create account and login as admin) last of this it isn't working. When i click on Login as admin tab nothing appears. I don't get where is the problem, why the tab is not working, can anybody help me with a solution?