I made a tab view using bootstrap for a angular template. but when i click on the tab it goes to the angular link router instead of going to the tab content.it may be because i have them as links but at the moment i really don't have any idea of how im going to solve this
<ul class="nav nav-tabs">
<li class="active">Where you heading <i class="fa"></i></li>
<li>Description<i class="fa"></i></li>
</ul>
<form id="rideForm" method="post" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="form-group">
<label class="col-sm-2 control-label">From:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="fullName" />
</div>
<label class="col-sm-2 control-label">To:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Time:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="jobTitle" />
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<a href="#address-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-right"></span> Next </button></a>
</div>
</div>
<div class="tab-pane" id="address-tab">
<div class="form-group">
<label class="col-sm-3 control-label">Description</label>
<div class="col-sm-5">
<textarea rows="4" cols="50"></textarea>
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-plane"></span> Ride</button>
<a href="#info-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Previous </button></a>
</div>
</div>
</div>
<div style="margin: 15px">
</div>
</form>
please help!
Stop banging your head against the wall and just use http://angular-ui.github.io/bootstrap/
A quick work around to this issue is to add:
target="_blank"
to your links. Angular, behind the scenes, does stuff to your links which is why you're having that problem.
This is a temp. solution to the issue.
Related
I am trying to set up a modal with tabs in it. This is for login/signup. However, instead of just substituting the the sign up form when it is clicked, it just stacks it below the login form. Bootply link: http://www.bootply.com/5ssZsWHIzv
Any help would be much appreciated!
Your col-md-6 class is in a wrong place, you should nest the two column outside of the tab content div. I've modified the code.
Bootply: http://www.bootply.com/fE04YpZxgN
<button class="btn btn-primary btn-sm" href="#signup" data-toggle="modal" data-target=".bs-modal-sm" style="margin-top: 10px">Sign In/Register
</button>
<div class="modal fade bs-modal-sm" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content clearfix">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
</ul>
</div>
<div class="modal-body">
<div class="col-md-6">
<div id="myTabContent row" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="signinTab">
<form class="form-horizontal" id="loginForm">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div id="loginErrors">
</div>
<div class="control-group">
<label class="control-label" for="loginEmail">Email:</label>
<div class="controls">
<input id="loginEmail" name="email" type="text" class="form-control" placeholder="username#example.com">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<div class="btn-toolbar">
<button id="signin" name="signin" class="btn btn-success">Sign In
</button>
<button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="signup">
<form class="form-horizontal" id="signUpForm">
<fieldset>
<!-- Sign Up Form -->
<div id="signUpErrors">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="example#example.com">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">First Name:</label>
<div class="controls">
<input id="firstName" name="firstName" class="form-control" type="text" placeholder="John">
</div>
</div>
<div class="control-group">
<label class="control-label" for="userid">Last Name:</label>
<div class="controls">
<input id="lastName" name="lastName" class="form-control" type="text" placeholder="Smith">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********">
<em>Must have atleast one number</em>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter
Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<div class="btn-toolbar">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up
</button>
<button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-md-6 pull-right">
<a class="btn btn-block btn-social btn-facebook">
<span class="fa fa-facebook"></span> Sign in with Facebook
</a>
<a class="btn btn-block btn-social btn-foursquare">
<span class="fa fa-foursquare"></span> Sign in with Foursquare
</a>
<a class="btn btn-block btn-social btn-openid">
<span class="fa fa-openid"></span> Sign in with OpenID
</a>
<a class="btn btn-block btn-social btn-google">
<span class="fa fa-google"></span> Sign in with Google
</a>
<a class="btn btn-block btn-social btn-google">
<span class="fa fa-google"></span> Sign in with Google
</a>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/0y8oy7gf/2/
I have a Bootstrap 3 form in which I have a popover that is placed at the right of the first text input. The popover is triggered on focus of that input, and the trigger is working correctly. My problem is that I'd like for the popover to be wider so that I can have longer lines of text, but it seems to be contained within the parent .col-xs-6. Is there any way to have it be contained by .container-fluid instead, so that it can occupy the empty space on the right?
HTML is below, and the above jsfiddle demonstrates the problem. Thanks!
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 panel panel-gray floating">
<div class="panel-body">
<form action="?" method="POST" id="foo">
<div class="form-group">
<h3>Set your new password</h2>
</div>
<div class="form-group form-group-lg">
<label for="new-password">New password</label>
<input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
</div>
<div class="form-group form-group-lg">
<label for="confirm-new-password">Confirm new password</label>
<input type="password" class="form-control" id="confirm-new-password">
</div>
<div class="form-group form-group-lg">
<label for="security-answer">Answer your security question:</label>
<p id="security-question">How many cups of sugar does it take to get to the moon?</p>
<input type="text" class="form-control" id="security-answer">
</div>
<div class="btn-group-lg">
<input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
You simply need to set the data-container attribute to tell the popover which element to use as it's containing element (see the documentation):
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 panel panel-gray floating">
<div class="panel-body">
<form action="?" method="POST" id="foo">
<div class="form-group">
<h3>Set your new password</h2>
</div>
<div class="form-group form-group-lg">
<label for="new-password">New password</label>
<input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-container=".container-fluid" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
</div>
<div class="form-group form-group-lg">
<label for="confirm-new-password">Confirm new password</label>
<input type="password" class="form-control" id="confirm-new-password">
</div>
<div class="form-group form-group-lg">
<label for="security-answer">Answer your security question:</label>
<p id="security-question">How many cups of sugar does it take to get to the moon?</p>
<input type="text" class="form-control" id="security-answer">
</div>
<div class="btn-group-lg">
<input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/0y8oy7gf/3/
I want to put the last div (processo div) align with the (tiposessao), but I want it at the next line, and I cant jump to the next line, even putting the row attribute. any solutions
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="form-group">
<div class="col-md-6">
<label for="relator">Conselheiro Relator</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" id="relator" disabled="true" placeholder="Relator">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tipo de Sessao <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ordinaria</li>
<li>Especial</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" placeholder="Data da Sessao"/>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="processo" class="label-control"></label>
<input type="text" class="form-control"/>
</div>
</div>
</form>
I think this should be what you are looking for as far as i understood.
https://jsfiddle.net/rnmdt2t8/
<div class="row">
<div class="col-md-4 col-md-offset-5">
<div class="form-group">
<label for="processo" class="label-control"></label>
<input type="text" class="form-control"/>
</div>
</div>
</div>
Full code is on jsfiddle to check.
I want my Signup and Login form at the same place .By default i want to show the Signup form . On Login Button Click event i want Signup form should be replaced by Login form at the same place or position but its not happening . What is happening is Signup form is coming at top while login form is coming at down . To see the result as of now i have removed Visibility css ..
Here is my Markup ..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-7 text">
<h1><strong>Custom</strong> Authentication Form</h1>
<div class="description">
<p>
Please register or enter credentials to enjoy the app
</p>
</div>
<!-- Trying to add Angular JS Snippet !-->
<div ng-controller="LoginController" class="top-big-link">
<a class="btn btn-link-1" href="" ng-click="$event.preventDefault();Register()">Login</a>
</div>
</div>
<!-- Signup Form Here !-->
<div ng-controller="SignupformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Sign up now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="form-first-name">First name</label>
<input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-last-name">Last name</label>
<input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<button type="submit" class="btn">Sign me up!</button>
</form>
</div>
</div>
<!-- Login Form Here !-->
<div ng-controller="LoginformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Login now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" placeholder="User ID..." class="form-first-name form-control" id="UserID">
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="text" name="Password" placeholder="Password..." class="form-last-name form-control" id="Password">
</div>
<button type="submit" class="btn">Login!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to resolve this ..
This is how I did it:
<div class="col-sm-7 text">
<h1><strong>Atlas</strong> Authentication Form</h1>
<div class="description">
<p>Please register or enter credentials to enjoy the app</p>
</div>
<ul class="nav nav-pills" id="myTab">
<li class="active">Sign Up </li>
<li>Log In </li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="signup">
<div ng-controller="SignupformController" class="col-sm-5 form-box">
...
</div>
</div>
<div class="tab-pane" id="login">
<div ng-controller="LoginformController" class="col-sm-5 form-box">...</div>
</div>
</div>
Here is the JSFiddle demo
What you are actually to achieve is basically the way bootstrap nav-pills work. You just need to display the buttons as nav-pills and then set the respective contents in tab-content class.
Using data-toggle="pill" will automatically switch between the tabs and contents.
(You can add the fade class along the tab-pane class to give the switching a little effect like this :) )
How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>