First experience with bootstrap. Want 2 panels next to each other using the col-lg-6 class. Left panel will be a link to an article while holding an image. Right will be a signup/login box.
When loading the site the 2 panel goes underneath?
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body"><img class="img-responsive" src="images/warning.png"</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>
</div>
This is all inside a container.
Before adding img
After adding img
Please use this HTML
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">
<img class="img-responsive" src="images/warning.png"/>
</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>
Related
I have tried everything but the exact same code works for the standalone application.
Here is the code for Profile component:
<app-header (sendUserdata)="getUserdata($event)" (sendToken)="getToken($event)" > </app-header>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a (click)="onClick('myProfile')"> My Profile </a>
</li>
<li>
<a (click)="onClick('addPassword')">Add Password</a>
</li>
<li>
Show Password
</li>
<li>
<a (click)="logOut()">Logout</a>
</li>
</ul>
</div>
<div *ngIf="myProfile">
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<h1>Hello, {{userData.ofa}}</h1>
<img src="{{userData.Paa}}" alt="">
<p>{{userData.U3}}</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="addPassword">
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<div class="container">
<h1>Submit Password</h1>
<form>
<div class="form-group">
<label for="name">Application Name</label>
<input #applicationname type="text" class="form-control" id="" required >
</div>
<div class="form-group">
<label for="alterEgo">Username</label>
<input #username type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="alterEgo">Password</label>
<input #password type="text" class="form-control" id="password" [value]="randomPassword">
</div>
<button type="button" class="btn btn-success" (click)="generatePassword()">Generate Random Password</button>
<button type="submit" class="btn btn-success dropbox-saver" (click)="submitData(applicationname.value,username.value,password.value)">Submit</button>
<hr>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the output if I run the exact same code as standalone application.
check screenshot of standalone app
Here is the output of the profile component where Save to Dropbox button is not showing up:
Not Working button after login
At the same time, the button is showing up on the main page, where user hasn't logged in yet.
I have tried checking without all the bootstrap classes and divisions. But, I am unable to get it working.
The form fails to work, when the subscribe button is clicked, and there is no reaction or error.
See the code here:
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<div class="input-group-addon subscribe-addons">subscribe</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
You have to use a button in order to submit your data. And additionally in your form, I have added a way to pass data, in method="post".
Please refer the doc.
https://www.w3schools.com/css/css_form.asp
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form method="post" action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<input type="submit" value="Subscribe">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
You're not using an input you're simply styling a div, change the subscribe div to an input with the type="submit" like below and it'll fire. Also add a method to the form.
<section id="contact" class="section section-subscribe bg--position-center no-repeat bg-cover" style="background-image:url(images/subscribe.png)">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="subscribe-card bg--position-center no-repeat bg-cover" style="background-image:url(images/mail.png)">
<header>
<h3 class="text-center"><span class="text--semi-bold">Subscribe to </span> <span class="text--light">Our Newsletter</span></h3>
</header>
<div class="subscription-form">
<form method="post" action="email-subscribe.html">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<input type="email" class="form-control" id="exampleInputAmount" placeholder="Email">
<input type="submit" value="subscribe" class="input-group-addon subscribe-addons">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
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/
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 :) )
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.