I am trying to make a form with bootstrap 3 and all the labels are centered. It works fine if I just have
<body>
<div style="width:80%; padding:20%">
<form>
form stuff
</form>
</div>
</body>
but if it is inside a tab it aligns all the text in the center of the input/select bar like so
This is what I want it to look like
Sorry about the large amount of code. I can't recreate the issue without it for some reason. The select bar is like the rest with less code.
<!DOCTYPE html>
<html>
<head>
<title>TD Notes</title>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel = "stylesheet">
<link rel="stylesheet" href="./styles.css">
<script src='./node_modules/jquery/dist/jquery.min.js'></script>
<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
</head>
<body style="background-color: white; height: 100%; width: 100%; text-align: center">
<script src="jscolor.js"></script>
<div id="navBar" class="container" style="background-color: black; height: 30px; width: 100%" >
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a data-toggle="tab" href="#Body">Body</a></li>
<li><a data-toggle="tab" href="#AAC">AAC</a></li>
<li><a data-toggle="tab" href="#TPMS">TPMS</a></li>
<li><a data-toggle="tab" href="#BCM">BCM</a></li>
<li><a data-toggle="tab" href="#GBCM">GBCM</a></li>
<li><a data-toggle="tab" href="#MSM">MSM</a></li>
<li><a data-toggle="tab" href="#RX">RX</a></li>
<li><a data-toggle="tab" href="#THC">THC</a></li>
<li><a data-toggle="tab" href="#TX">TX</a></li>
<li><a data-toggle="tab" href="#UID">UID</a></li>
<li><a data-toggle="tab" href="#UPE">UPE</a></li>
<li><a data-toggle="tab" href="#NewProb">New Problem</a></li>
</ul>
</div>
<div id="content" style="width: 80%; padding-left: 20%">
<div class="tab-content" style="width: 100%; height: 100%">
<div class="tab-pane fade in active" id="Body" style="width=100%"></div>
<div class="tab-pane fade" id="AAC"></div>
<div class="tab-pane fade" id="TPMS"></div>
<div class="tab-pane fade" id="BCM"></div>
<div class="tab-pane fade" id="GBCM"></div>
<div class="tab-pane fade" id="MSM"></div>
<div class="tab-pane fade" id="RX"></div>
<div class="tab-pane fade" id="TX"></div>
<div class="tab-pane fade" id="THC"></div>
<div class="tab-pane fade" id="UID"></div>
<div class="tab-pane fade" id="UPE"></div>
<div class="tab-pane fade" id="NewProb">
<form>
<fieldset class="form-group">
<label for="lineType" class="control-label">Line Type</label>
<select class="form-control" id="lineType">
<option>Body</option>
<option>AAC</option>
<option>TPMS</option>
<option>BCM</option>
<option>GBCM</option>
<option>MSM</option>
<option>RX</option>
<option>TX</option>
<option>THC</option>
<option>UID</option>
<option>UPE</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="testerType" class="control-label">Tester Type</label>
<input class="form-control" id="testerType">
</fieldset>
<fieldset class="form-group">
<label for="productType" class="control-label">Product Type</label>
<input class="form-control" id="productType">
</fieldset>
<fieldset class="form-group">
<label for="partNumber" class="control-label">Part Number</label>
<input class="form-control" id="partNumber">
</fieldset>
<fieldset class="form-group">
<label for="stepNumber" class="control-label">Step Number</label>
<input class="form-control" id="stepNumber">
</fieldset>
<fieldset class="form-group">
<label for="stepName" class="control-label">Step Name</label>
<input class="form-control" id="stepName">
</fieldset>
<fieldset class="form-group">
<label for="Other" class="control-label">Other (Automation, OPUI, Scanners, etc.)</label>
<textarea class="form-control" id="other"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="problem" class="control-label">Problem</label>
<textarea class="form-control" id="problem"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="counterMeasure" class="control-label">Countermeasure</label>
<textarea class="form-control" id="countermeasure"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="engineer" class="control-label">Engineer</label>
<input class="form-control" id="engineer">
</fieldset>
<fieldset class="form-group">
<label for="date" class="control-label">Date</label>
<input class="form-control" id="date">
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
</body>
</html>
Related
I have two html and two different controller files and my requirement is i should display one common submit button for both the forms and it should be disabled until the mandatory fields are entered in both the forms.Here is the attached plunker https://plnkr.co/edit/RAzfWZYuCi0kXPL6PDoT?p=preview
<body ng-controller="myCtrl" class="container">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#menu2">Student Details</a></li>
<li><a data-toggle="tab" href="contactdetails.html">Contact Info</a>
</li>
</ul>
<div class="tab-content">
<div id="menu2" class="tab-pane active">
<div class="form-group">
<label for="name">Student Name:</label>
<input type="name" class="form-control" id="name" ng-
model="students.name" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="age" class="form-control" id="age" ng-
model="students.age">
</div>
</div>
</div>
I'm trying to implement the same CSS for an input of type text as similar to the one we have in CreateUser default page. So when you click on User Name textbox it shows a blue line under it. Same I tried on my page it works fine, but when I go to other page and come to this page again, it does not show the blue line under the textbox.
create-user.component
<div bsModal #createUserModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
<div class="modal-dialog">
<div #modalContent class="modal-content">
<form *ngIf="active" #createUserForm="ngForm" id="frm_create_user" novalidate (ngSubmit)="save()">
<div class="modal-header">
<button type="button" class="close" (click)="close()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<span>{{l("CreateNewUser")}}</span>
</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active">User Details</li>
<li role="presentation">User Roles</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane animated fadeIn active" id="user-details">
<div class="row clearfix" style="margin-top:10px;">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input id="username" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2" class="validate form-control">
<label for="username" class="form-label">{{l("UserName")}}</label>
</div>
</div>
</div>
</div>
mypage.html
<div class="row clearfix" [#routerTransition]>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card main-content">
<div class="row" style="background-color:white;">
<div class="header">
<h2>
{{l('MyPage: ADD/EDIT')}}
</h2>
</div>
<br />
<form *ngIf="active" #myForm="ngForm" id="frm_create_store" novalidate (ngSubmit)="onSubmitBtnClick(myForm)">
<div class="col-md-12">
<div class="form-group form-float">
<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
</div>
</div>
I think you need to label with form="myName" inside the div which has class="form-line".
Instead of;
<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
Try this;
<div class="form-line">
<label for="myName" class="form-label">{{l("myName")}}</label>
<input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</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 Have included bootstrap tabs in my project.But the problem I am facing is that when I click on the tabs the content are getting changed,but the tab is not getting active.ie always the first tab is active irrespective of the click.
How can I get rid of this?
Code is given below.
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Trip Overview
</li>
<li role="presentation">Itinerary
</li>
<li role="presentation">Cost
</li>
<li role="presentation">Terms & Condition
</li>
<li role="presentation">Inquiry
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<span>{{model.overview}}</span>
</div>
<div role="tabpanel" class="tab-pane" id="itinerary">
<div ng-repeat="itenary in model.itenary.long">
<p>{{itenary.name}}</p>
<p>{{itenary.content}}</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="cost">Cost details will be uploaded soon</div>
<div role="tabpanel" class="tab-pane" id="ta">
<h3>Terms & Conditions</h3>
<div ng-repeat="term in model.tna.terms">
<ul>
<li>{{term}}</li>
</ul>
</div>
<h3>Payments</h3>
<div ng-repeat="payment in model.tna.payment">
<ul>
<li>{{payment}}</li>
</ul>
</div>
<h3>Cancellation Policy</h3>
<div ng-repeat="cancelPolicy in model.tna.payment">
<ul>
<li>{{cancelPolicy}}</li>
</ul>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="book">
<div id="contact-form" class="clearfix">
<ul id="errors" class="">
<li id="info">There were some problems with your form submission:</li>
</ul>
<p id="success">Thanks for your message! We will get back to you ASAP!</p>
<form method="post" action="/home">
<label for="name">Name: <span class="required">*</span>
</label>
<input type="text" id="name" name="name" value="" placeholder="<Your Name>" required="required" autofocus="autofocus" />
<label for="email">Email Address: <span class="required">*</span>
</label>
<input type="email" id="email" name="email" value="" placeholder="<your mail>" required="required" />
<label for="telephone">Telephone:</label>
<input type="tel" id="telephone" name="telephone" value="" />
<label for="enquiry">Enquiry:{{model.name}}</label>
<label for="message">Message: <span class="required">*</span>
</label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>
<span id="loading"></span>
<input type="submit" value="Send" id="submit-button" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</div>
</div>
these are the imported libraries inn my project
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2 lb" for="email">Email : </label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Subject : </label>
<div class="col-sm-6">
<select class="form-control col-sm-6 lb" id="subj" name="subject" required>
<option>General queries</option>
<option>Group and corporate bookings</option>
<option>Suggestion and complaints</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 lb" for="pwd">Message : </label>
<div class="col-sm-6">
<div class="checkbox">
<textarea class="form-control" id="message" name="message" required></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
This is my form. It works fine. the thing is i am using bootstrap and i want everything in the perfect center responsive to the screen size. Please help me with this. Thanks!
I don't know, whether i m saying correct or not.
If we use css like,
text-align:center;
It will be affected align center both vertically and horizontally.
So there is no css for particular vertical align center.
you need to change dropdown text and other
<div class="panel panel-warning mypanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Data Communication/Networking
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>