I have a header-div on my Site. Inside the header I want to have a login-form in-line on the right side.
css:
#header {
position: absolute;
top: 0;
width: 100%;
height: 45px;
padding: 5;
background: #fff;
border-bottom: 1pt solid #ccc;
text-align: right;
font-weight: bold;
}
#header div {
/*display: inline-block;*/
cursor: pointer;
/*padding: 4px;*/
float: right;
text-decoration: none;
font-size: 15px;
margin-right: 5px;
}
#submitButton {
float:right;
}
html:
<div id="header">
<div id="login">
<form class="form-inline" role="form">
<div class="row">
<button type="submit" class="btn btn-default" id="submitButton">Login</button>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="password" />
</div>
</div>
</div>
</form>
</div>
</div>
That's what I have so far:
http://jsfiddle.net/n5qmc/254/
But if I go in the password form and press TAB I don't get in the email input field. Because of the float:right thing. I need to do this somehow different.
What is the right way to do this? Thanks!
What you need is tabindex but as your html is not good and in bootstrap you have used your own style so tabindex got different behaviour.
I have updated your fiddle with changes in html and css. Please check and let me know if its ok for you..
I have removed float and also removed extra margin which were causing problem now if you will use tab then it will go one by one and also will work better in resizing. I have also changed html so email field will be first in both case.
Related
This is probably very simple but I've been unable to figure it out. All I want to do is place the button underneath the input rows.
This is what I have attempted so far:
#subscribe button {
border: 0;
margin-top: 10px;
margin-left: 10px;
padding: 9px 27px;
cursor: pointer;
background: #f82249;
color: #fff;
transition: all 0.3s ease;
outline: none;
font-size: 14px;
border-radius: 50px;
position: relative;
}
<form method="POST" action="#">
<div class="form-row justify-content-center">
<div class="col-auto">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<div class="col-auto">
<input type="text" class="form-control" placeholder="A website I want to use Cobble on is:">
</div>
<div class="col-auto">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
and this is what the end result always is:
Any help would be immensely appreciated. Thank you.
You have all three form elements inside this div:
<div class="form-row justify-content-center">
Make another div just like that one and move the button inside it. In fact, it looks like you want each of those elements in its own "form-row" div. The only reason the two text inputs are on different lines is because they take up the whole row and they're wrapping.
Every time I submit the form, even when the input text fields are empty, the form gets submitted even though I put the required tag. Is there a problem with my code? I don't know how to fix this or where the error lies. Also, how can I clear the input fields after I submit. Thank you in advance. Is it a problem from the compiler (I'm using VS code and I'm launching the website on google chrome)
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-sm-5 form-group">
<label for="firstName">First Name</label>
<input
type="text"
id="firstName"
class="form-control"
#fnameinput
required />
</div>
<div class="col-sm-5 form-group">
<label for="lastName">Last Name</label>
<input
type="text"
id="lastName"
class="form-control"
#lnameinput
required />
</div>
<div class="col-sm-5 form-group">
<label for="phone">Phone Number</label>
<input
type="text"
id="lname"
class="form-control"
#phoneinput
required />
</div>
<div class="col-sm-2">
<button
class="btn btn-success"
type="submit"
(click)="onAddContactItem()"
>Add New Contact</button>
</div>
</div>
</form>
</div>
</div>
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 3px solid #CCC;
border-radius: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 90px;
text-align: center;
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
font-size: 16px;
display:block;
border: 0;
height: 34px;
margin: 0;
float:left;
}
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
novalidate is default in later version of angular. So HTML5 validators are not triggered. Use ngNativeValidate in your form as an attribute ( )
I've created a search form using bootstrap. I've also used jquery to generate a delete search button (x) when text is input, however, I am stuck trying to get it on the same line as the search form (ideally in the box to the right).
As you can see in the second picture, when "1" is entered into the form the button is generated below the search form. I have included my code below, any help would be greatly appreciated.
<form id="PWFS">
<label for="Label">Info</label>
<button type="button" class="btn btn-link btn-xs"<i class="fa fa-question-circle fa-lg"></i></button>
<div class="row">
<div class="col-md-8">
<div class="input-group btn-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control search" id="search" placeholder="Workflow #">
<span id="searchclear" class="searchclear fa fa-times"></span>
</div>
</div>
<button id="WFFsearch" type="submit">Search</button>
</div>
</form>
</div>
<br>
CSS
.searchclear {
position: relative;
z-index: 10;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Thank you Lal, Phil and adamdc78. I just had to change the position to absolute.
I am trying to get my registerbutton div to float right of the div - signinbutton. I do not think I can wrap the signin div around the register div to make it a parent because I have pop up code under the signinbutton div. I tried making a jsfiddle, but the effect did not result the same. To see a real view of this, my site is sundayfundayleague.com .
I need to get the register button to be inline with the Sign in one.
HTML
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div class="registerbutton">
Register
</div>
CSS
.signinbutton {
padding: 10px;
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
}
.registerbutton {
padding: 10px;
font-size: 2.5em;
margin-right: 30%;
float: right;
}
You can use span inside the 1st div
Demo
https://jsfiddle.net/knkvksdz/
Html
<div class="signinbutton"> <a class="signin" href="javascript:void(0)">Sign In</a>
<span class="registerbutton">
Register
</span>
</div>
Css
.signinbutton {
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
}
.registerbutton {
float: right;
}
flip the divs around in the HTML code and use the float: left; attribute instead. Float right tends to be a bit more tricky I think and float left is the more complient one. You might have better luck doing it that way.
<div class="registerbutton">
Register
</div>
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
CSS
.registerbutton {
padding: 10px;
font-size: 2.5em;
margin-right: 30%;
}
.signinbutton {
padding: 10px;
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
float: left;
}
First of all. Try reducing your picture size. its too big. i takes time to load the page.
Here is my solution.
I will add wrapper outside those two.
<div class="wrapper">
<div class="signinbutton">
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div id="light" class="signInpopup">
<a class="close" href="javascript:void(0)">Close</a>
<form id="signInform" name="Sign In" action="" method="POST" autocomplete="on" accept-charset="utf-8">
<div class="center">
<input type="text" name="username" id="signInInput" placeholder="Username" autocomplete="on" required="">
<br>
<input type="password" name="password" id="signInPasswordInput" placeholder="Password" autocomplete="off" required="">
<br>
<br>
<br>
<label for="remember">
<input type="checkbox" name="remember" id="remember">Remember me</label>
<input type="hidden" name="token" value="687d55402565d69c55ab41c51eba5d76">
<label for="widebutton">
<input id="widebutton" type="submit" value="Sign In">
</label>
<br>
<br>
</div>
</form>
</div>
<div id="fade" class="black_overlay"></div>
<div class="registerbutton">
Register
</div>
</div>
and add this css to wrapper:
.wrapper{
display: inline-block;
width: 100%;
margin-top: 50px;
}
remove this from your #registerbutton
float:right
and remove from your .signinbutton
margin-top:352px;
and add .signinbutton
float:left
I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.
My code is like this:
<div class="container">
<div class="row">
<div class="form-group col-lg-4">
<label class="control-label">Name</label>
<input id="txtName" class="form-control input-sm" />
<span class="glyphicon glyphicon-search"></span>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
I don't want to use input group.
Please suggest an alternate way or alternate html with css.
Here are three different ways to do it:
Here's a working Demo in Fiddle Of All Three
Validation:
You can use native bootstrap validation states (No Custom CSS!):
<div class="form-group has-feedback">
<label class="control-label" for="inputSuccess2">Name</label>
<input type="text" class="form-control" id="inputSuccess2"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box
Input Group:
You can use the .input-group class like this:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box
Unstyled Input Group:
You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.
Use a normal input group but add the class input-group-unstyled:
<div class="input-group input-group-unstyled">
<input type="text" class="form-control" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Then change the styling with the following css:
.input-group.input-group-unstyled input.form-control {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
Also, these solutions work for any input size
Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.
.input { width: 90%; }
.input-icon {
display: inline-block;
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
color: #000;
font-size: 12px;
font-weight: bold;
margin-left: 4px;
}
EDIT
Per dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css
<input type="text" name="whatever" id="funkystyling" />
Here's the CSS for the image on the left:
#funkystyling {
background: white url(/path/to/icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
#funkystyling {
background: white url(/path/to/icon.png) right no-repeat;
padding-right: 17px;
}
I liked #KyleMit's answer on how to make an unstyled input group, but in my case, I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap. So, I did this:
css
.input-group.input-group-unstyled-right input.form-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
html
<div class="input-group input-group-unstyled-right">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input type="text" class="form-control">
<span class="input-group-addon input-group-addon-unstyled">
<i class="fa fa-check"></i>
</span>
</div>
You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.
Here's an example, using Font Awesome for the search icon:
.search-box-container input {
padding: 5px 20px 5px 5px;
}
.search-box-container:after {
content: "\f002";
font-family: FontAwesome;
margin-left: -25px;
margin-right: 25px;
}
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-box-container">
<input type="text" placeholder="Search..." />
</div>