I have a responsive layout. One block has a form input and button. How can I make the elements have a combined width of 100%?
Im using Twitter Bootstrap 3 but I cant see any classes they provide for this.
Ive tried using display table on the the container and display table-cell on the the children but it doenst work, im assuming text input doenst render the styles in the same way a div would.
I could use absolute positioning but then the CSS would break if the button's text was lengthened. So I would rather stay clear of this method.
I dont want to set a fixed % width eg 80% for the input and 20% for the button. I want the button to take up the space it requires, and for the input to take whatever is left.
http://codepen.io/anon/pen/jEPoRG
<div class="form-group">
<input type="text" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</div>
.form-group {
background: grey;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 30%;
}
If you put a div around the search bar, then you can use display: table/table-cell on .form-submit and its children. I assumed that .search_bar_div's width would have been auto, but that didn't quite stretch all the way. But then I tried 100% and this seems to be working as you want.
I tested Mozilla and Chrome only.
<style type="text/css">
.form-group {
background: grey;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 30%;
display: table;
}
.search_bar_div {
width: 100%;
display: table-cell;
}
.form-group .search_bar_div #search_bar {
width: 100%;
}
.form-group .btn {
display: table-cell;
}
</style>
<div class="form-group">
<div class="search_bar_div">
<input id="search_bar" type="text" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
I need help making the Email Opt-In bar under the Header look at the same on mobile devices as it does on my desktop. Here is the website.
I am not skilled in any kind of coding so any help would be greatly appreciated! :)
Here is the CSS I am currently using:
/* this would be the color and size of the main bar */
#nsu-head {
background-color: #ffcfde;
padding: 34px;
}
/* basic text color and placement */
#nsu-head p {
float: left;
color: #000000;
margin-top: -5px;
padding-right: 10px;
}
/* placement of the invitation text */
#nsu-head p.form_label {
text-transform: uppercase;
padding-left: 50px;
padding-right: 30px;
margin-top: 0;
}
#nsu-form-1 label {
display: none;
}
/* hides the input field labels */
/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 {
/* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit {
background: no-repeat darkMagenta;
border: 1px solid darkMagenta;
}
input#nsu-submit-1.nsu-submit:hover {
background: no-repeat black;
border: 1px solid black;
}
/* placement of post sign up text if no thank-you page */
p#nsu-signed-up-1 {
float: right;
font-size: .9rem;
color: #DDD;
padding-right: 0;
margin-top: -18px;
width: 45%;
}
your code is quite messy, but try doing this:
1) Look for Aweber's code. IN your source code looks like this
<div class="nsu-form" id="nsu-head">
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
<!-- Form by Newsletter Sign-Up v2.0.3 - http://wordpress.org/plugins/newsletter-sign-up/ -->
<form class="nsu-form" id="nsu-form-0" action="http://www.aweber.com/scripts/addlead.pl" method="post"><p><label for="nsu-name-0"> </label><input class="nsu-field" id="nsu-name-0" type="text" name="name" placeholder="Name" /></p><p><label for="nsu-email-0"> </label><input class="nsu-field" id="nsu-email-0" type="email" name="email" placeholder="Email" required /></p><textarea name="nsu_robocop" style="display: none;"></textarea><p><input type="submit" id="nsu-submit-0" class="nsu-submit" name="nsu_submit" value="Get it!" /></p></form>
<!-- / Newsletter Sign-Up -->
</div>
it might be different in your Aweber's code, but you'll get the idea. Now, if your plugin allows it to, try to move this part:
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
outside <div class="nsu-form" id="nsu-head"> (thus, that paragraph has to be BEFORE this nsu-form line)
Once you have this all, be sure to remove everything you currently have in your code and add it to header-left, like this:
<div id="header-left-section">
YOUR CODE HERE
</div><!-- #header-left-section -->
this will make your theme work as expected. That is: your form on the left and full width on mobile and your nav on the right and full width on mobile.
However, if you also want it to be full width in ANY screen, add this to your CSS:
#header-left-section, #header-right-section{float:none !important; clear:both; display:block}
This should fix every issue you have
I'm trying to build a search form using Bootstrap. Here's the HTML:
<form class="form-search search-bar">
<div class="input-append">
<input type="text" class="search-query" placeholder="Enter your address here...">
<button type="submit" class="btn btn-primary">
Search <i class="icon-search icon-white"></i></button>
</div>
</form>
I'm new to CSS - how do I style this so that the search elements are horizontally centered across the block? Also, how do I increase the height of the search elements?
You should add an ID
.search-bar {
text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
height: 30px;
}
.search-bar .btn-primary {
height: 40px;
}
to place them next to eachother you can use the float command
.search-query {
float:left;
}
.btn-primary {
float:left;
}
Make sure the width of input-append is large enough to place them next to eachother.
to increase there height just place height:[amount]; in the same block as float in the CSS
I have tried everything. I cannot get this centered on the screen. I am using ie 9 but it does the same in chrome. It just sits on the left of the webpage. Thank you for any help.
<style type="text/css">
body {
margin:50px 0px; padding:0px;
text-align:center;
align:center;
}
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
</style>
</head>
<body>
<form name="Form1" action="mypage.asp" method="get">
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
<input type="submit" name="submit" id="submit" value="submit" class="button" />
</form>
</body>
Another way
body {
text-align: center;
}
form {
display: inline-block;
}
<body>
<form>
<input type="text" value="abc">
</form>
</body>
Wrap your form in a div.
Set the div's display to block and text-align to center (this will center the contained form).
Set the form's display to inline-block (auto-sizes to content), left and right margins to auto (centers it horizontally), and text-align to left (or else its children will be center-aligned too).
HTML:
<div class="form">
<form name="Form1" action="mypage.asp" method="get">
...
</form>
</div>
CSS:
div.form
{
display: block;
text-align: center;
}
form
{
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body { text-align: center; }
/* center all items within body, this property is inherited */
body > * { text-align: left; }
/* left-align the CONTENTS all items within body, additionally
you can add this text-align: left property to all elements
manually */
form { display: inline-block; }
/* reduces the width of the form to only what is necessary */
http://jsfiddle.net/sqdBr/4/
Works & tested in Chrome/IE/FF
You can try
form {
margin-left: 25%;
margin-right:25%;
width: 50%;
}
Or
form {
margin-left: 15%;
margin-right:15%;
width: 70%;
}
Try adding this to your css
.form { width:985px; margin:0 auto }
and add width:100% to the body tag
Then put:
<div class="form">
before the tag.
You can try this code for your 'body' tag, change it as you like..
body {
display: flex;
justify-content: center;
margin-top: 5%;
align-items: center;
}
i dont know if the full resolution has been made for this yet. i know that from doing a 2 column page with fixed left side bar, to get a contact us form centered on my page i put the following:
form {
width: 100%;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
this worked for me so thought id throw in my resolution to the same problem
This best solution I found online is using absolute positioning.
.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-49%, -49%);
}
You can use the following CSS to center the form (note that it is important to set the width to something that isn´t 'auto' for this to work):
form {
margin-left:auto;
margin-right:auto;
width:100px;
}
I css I got no idea
but I made that just by centering the form in html
something like this:
in css:
form.principal {width:12em;}
form.principal label { float:left; display:block; clear:both; padding:3px;}
form.principal input { float:left; width:8em;}
form.principal button{clear:both; width:130px; height:50px; margin-top:8px;}
then in html:
<center><form class="principal" method="POST">
<fieldset>
<p><label for="username">User</label><input id="username" type="text" name="username" />
<p><label for="password">Password</label><input id="password" type="password" name="password" /></p>
<button>Log in</button>
</fieldset>
</form></center>
This will center the form, and the content will be in the left of the centered form.
Normally, if you look up any software issue on stackoverflow, you quickly find a clear answer. But in CSS, even something as simple as "center a form" leads to a long discussion, and lots of failed solutions.
Correction: orfdorf's solution (above) works.
body {
text-align: center;
}
form {
width:90%;
background-color: #c0d7f8;
}
<body>
<form>
<input type="text" value="abc">
</form>
</body>
<!DOCTYPE html>
<html>
<head>
<title>Private</title>
<!-- local links -->
<style>
body{
background-color:#6e6969;
text-align:center;
}
body .form_wrapper{
display:inline-block;
background-color: #fff;
border-radius: 5px;
height: auto;
padding: 15px 18px;
margin: 10% auto;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class = "form_wrapper">
<form method="post" action="function.php">
<h1 class = "formHeading">Admin login form</h1>
<input type = "text" name = "username" id = "username"placeholder = "Enter Username" required = "required">
<input type = "password" name = "password" id = "password" placeholder = "Enter password" required = "required">
<button type = "submit" >Login</button>
froget password!
<span>?</span>help
</form>
</div>
</body>
</html>
Another solution (without a wrapper) would be to set the form to display: table, which would make it act like a table so it would have the width of its largest child, and then apply margin: 0 auto to center it.
form {
display: table;
margin: 0 auto;
}
Credit goes to: https://stackoverflow.com/a/49378738/7841955
I had the same problem (i use google)
What i did is i added the align attribute to the form
<form align="center">
<!--Stuff-->
</form>
That is one solution
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form