I have html search form - input and button.
Also I have Search title - h2 . But if I remove h2 title I have problem with button vertical-align.
html:
<h2 class="widget-title">Search</h2>
<form role="search" method="get" id="searchform" action="#">
<input type="text" placeholder="Search..." value="" >
<button type="submit" id="searchsubmit" value="">
<i class="fa fa-search"></i>
</button>
</form>
Css:
.widget-title {
margin-bottom: 40px;
font-size: 22px;
line-height: 18px;
}
#searchform input {
display: block;
max-width: 100%;
padding: 5px 10px;
border: 1px solid #ccc;
}
#searchsubmit {
position: absolute;
top: 59px;
right: 15px;
display: inline-block;
width: 50px !important;
height: 43px;
padding: 0;
border: none;
margin-bottom: 0;
vertical-align: middle;
background-color: transparent;
}
Is it possible to align button with and without search title (h2) ?
You don't need to use absolute positioning here, relative will be OK. position: relative and display: inline will solve the problem. And here is the working
js fiddle.
The markup is OK with <h2 class="widget-title">Search</h2> and without.
Related
My form is centered and I would like to place the submit button under the bottom left of my form. How can I do that?
My current code:
.bio {
display: block;
margin-left: auto;
margin-right: auto;
}
.send {
display: block;
margin-left: 0;
}
<form>
<input type="text" class="bio">
<input type="submit" class="send" value="Send">
</form>
Here's what I want basically.
Center the form instead, like so:
.form {
margin: 0 auto;
width: 400px;
}
.bio {
display: block;
width: 100%;
margin-bottom: 4px;
background-color: #eee;
border: none;
border-radius: 4px;
height: 120px;
resize: none;
padding: 8px;
}
.send {
border-radius: 4px;
background-color: red;
color: white;
border: none;
padding: 4px 16px;
}
<form class="form">
<textarea class="bio" placeholder="Text...">
</textarea>
<input type="submit" class="send" value="Send">
</form>
Try this :
.bio{
display: block;
margin-left: 0;
margin-right: auto;
}
.send{
display: block;
margin-left: 0;
}
Place the submit button outside the form but reference the form using the form's I'd property
<div>
<form action="..." method="..." Id="form-id">
.
.
.
</form>
<button type="submit" form="form-id">Submit</button>
</div>
I have a problem. I want to create a input text field with icons inside of the code.
I want to have my icons inside of the input text field. Unfortunately my CSS style didn't work. With others code the icons disappeared. I hope you can help me. Thank you in advance. Please see below for my code.
HTML
<div class="col-md-6 login-form">
<h3>Los gehts</h3>
<div class="form_login">
<div class="form-group">
<input type="text" id="email_field" placeholder="Email *">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<input type="password" id="password_field" placeholder="Passwort *">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="form-group">
<button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
</div>
<!--
<div class="form-group">
Forget Password?
</div> -->
</div>
</div>
CSS
.login-container {
margin-top: 5%;
margin-bottom: 5%;
text-align: center;
margin: auto;
padding-bottom: 5%;
}
.login-form {
padding: 5%;
text-align: center;
margin: auto;
}
.login-form h3 {
text-align: center;
color: #333;
}
.login-container form {
padding: 10%;
text-align: center;
display: inline-block;
position: relative;
width: 100%;
z-index: 1;
margin-bottom: 10px;
}
.btnSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;
}
.btnLogout {
margin-top: 1rem;
border-radius: 1rem;
cursor: pointer;
color: #fff;
background-color: #0062cc;
text-align: center;
display: inline-block;
border: none;
margin-bottom: 10px;
}
.btnLogout:hover {
background-color: #0575ec;
}
.login-form .btnSubmit {
font-weight: 600;
color: #fff;
background-color: #0062cc;
}
.login-form .ForgetPwd {
color: #0062cc;
font-weight: 600;
text-decoration: none;
}
.loggedin-div {
text-align: center;
padding-bottom: 5%;
}
You need to create a div with border that imitate a input border. Then, you need to create the text input at the left and add this code: <input type="image" src="yourimagefile.jpg">
I hope I help you.
If you want something to float somewhere else, you can use a combination of position:relative; and top/left with CSS. For instance, let's add an id to that login button and make it our icon...
<div class="form-group" id="submit">
<button type="submit" class="btnSubmit" onclick="signIn()">Login</button>
</div>
Then some styling...
#submit {
top:-21px;
left:228px;
position:relative;
width:100px;
}
And what we get, then, is an icon floating over the input field. Working Demo.
Works for me. Before:
After:
Here's an example with the blank <i> elements (converted to <img> so we could see something, as they had no href): Working Demo.
Okay, so maybe I'm not searching properly but I can't seem to find exactly what I'm looking for.
I have a form, let's say something like this:
div.some_form {}
div.some_form>span {
font-weight: bold;
position: relative;
text-align: left;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<br>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
what I want it to do is pretty much keep the inputs centred (which I'm able to do), which is why everything is in a div, I used text-align: center to centre everything, but I want the span element to be stuck to the top left corner of the first input, which I can't seem to do properly.
I mean, I get it, but then once I resize the window, the span shoots off into space (i.e. the text field will expand at a lower rate than the span is, which is great because the text stays centred even with the button attached) and I can't seem to get it to just stick.
(also this seriously isn't homework, I'm just getting into CSS and this is really bothering me..)
any help is obviously very much appreciated!
Thanks in advance :)
Adding a display: block to your span will work. And remove the <br />. You have the class specification wrong. The <span> isn't a direct child there. So > doesn't work:
body {
text-align: center;
}
div.some_form span.some_class {
font-weight: bold;
position: relative;
text-align: left;
display: block;
padding: 0 4.5%;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 45%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
div.some_form {
display: inline-block;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
Preview
Here the answer hope it can help you
.container{
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
}
.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<div class="container">
<span class="some_class">Some text</span>
<div class="input_container">
<input type="text" class="txtfield" />
<input type="submit" class="button" value="Submit" onclick="doSomething()" />
</div>
</div>
</form>
</div>
I tried to make a search block that need to be looking like this:
Now i want when someone will resize the window, the search button will still be in the same line, so i did:
CSS:
.search {
background-color: #23507c;
border: none;
outline: none;
font-size: 18px;
width: 92%
}
#searchButton {
width: 8%;
color: #555555;
font-size: 16px;
}
HTML:
<div id="search">
<form action="search.php" method="POST">
<span class="glyphicon glyphicon-search" style="font-size: 20px;"></span>
<span style="width: 100%;padding:0;margin:0;">
<input type="text" class="search" name="search" placeholder="search for diamonds" />
<button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span>
Search</button>
</form>
</span>
</div>
https://jsfiddle.net/kL1m9a8x/15/
What i try to do, is to insert the input and the button to a span that take the width of the blue block execept the glypicon, and than give to the input 80% from the parent element and the button have 20%, but its not working. The line break and the button found in the next line... even when the window is big...
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#search{
position: relative;
margin: 5%;
}
.search-inner{
display: table;
width: 100%;
background-color: #23507c;
border: none;
outline: none;
font-size: 18px;
}
.search-item{
display: table-cell;
vertical-align: middle;
}
.search-item-1{
width: 82%;
color: #fff;
}
.search-item-1 .glyphicon{
position: absolute; top: 50%; left: 10px;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.search-item-2{
text-align: right;
}
input,
button{
border: none;
outline: none;
font-size: 18px;
padding: 10px;
display: inline-block;
}
input{
background-color: #23507c;
color: #fff;
padding-left: 35px;
width: 100%;
}
button{
width: 110px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<div id="search">
<form action="search.php" method="POST">
<div class="search-inner">
<div class="search-item search-item-1">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="search" name="search" placeholder="search for diamonds" required />
</div>
<div class="search-item search-item-2">
<button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</div>
</form>
</div>
Here is how i would do it:
Basically making the input transparent, giving color to the form element and positioning the button absolutely over it. Note the position:relative on the form element, as position:absolute is always relative to the closest explicitly relative positioned parent.
*, *:before, *:after {
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
form {
background-color: #23507c;
display: block;
padding: 10px 15px;
width: 100%;
color: #fff;
font-size: 16px;
line-height: 24px;
position: relative;
}
form input {
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 16px;
line-height: 24px;
padding-left: 10px;
}
form button {
display: block;
position: absolute;
top: 10px;
right: 10px;
border: none;
outline: none;
height: 24px;
}
<!-- FontAwesome for icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- relevant code -->
<form action="search.php" method="POST">
<i class="fa fa-search"></i>
<input type="text" class="search" name="search" placeholder="search for diamonds" />
<button type="submit" id="searchButton"><i class="fa fa-search"></i> Search
</button>
</form>
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>