This is killing me. https://leadcheetah.com/dummy.php - Not sure why I can't center the input box and submit button. I've tried using bootstrap columns and manually adding align="center"
<div class="search-container" style="transform: translateY(0px);">
<!-- Form -->
<h2 align="center">Search Finder Tool</h2>
<form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
<input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
<p><input type="submit" class="button" value="Find Emails"></p>
</form>
<!-- Browse Jobs
<div class="browse-jobs">
Browse job offers by category or location
</div> -->
</div>
.search-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
form {
display: flex;
justify-content: center;
flex-flow: row wrap;
align-items: center;
}
p {
margin: 0;
}
<div class="search-container">
<!-- Form -->
<h2 align="center">Search Finder Tool</h2>
<form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
<input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
<p><input type="submit" class="button" value="Find Emails"></p>
</form>
<!-- Browse Jobs
<div class="browse-jobs">
Browse job offers by category or location
</div> -->
</div>
fiddle link with bootstrap
Button out from form and input and button inline center. I added a parent div for form and button so please check html also.
Edit as your requirement
Without the use of Flexbox (as it's not supported in many browsers)
Your markup should look similar to the following
<form method="POST" action="email-extract/email-extractor-service.php" id="findemail" style="width: 100%;text-align: center;margin: auto;">
<input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value="">
<input type="submit" class="button" value="Find Emails">
</form>
Adjusted styles
#findemail {
width: 100%;
text-align: center;
margin: auto;
}
Remove the float:left and margin-right: 2% from .search-container input and add margin: auto; to it.
Result
Edit: Also, make sure to remove the <br> tags.
On all components that you wish to center, ensure there are the following styles and that they are not being over-ridden.
margin-right: auto;
margin-left: auto;
Also noticed that there is a
float:left;
that will have to be removed from the CSS.
Hope it helps.
Related
Here is the HTML:
<form action="http://www.google.com/search" method="get" class="google">
<input type="hidden" name="as_q" value="site:hyoutube.com/" />
<p><label for="keyword">Search</label>
<input type="text" size="20" id="keyword" name="q" value="" class="sfield" /></p>
<p><input type="submit" value="Search" class="sbutton" /></p>
</form>
Here's the CSS:
.google{
display: flex;
flex-flow: row wrap;
align-items: center;
}
.sfield{
height: 24px;
}
.sbutton{
height: inherit;
}
JSFIDDLE
As you can see, the search field is of different height to the search button. How can I make them the same height without using absolute values like "14px"?
I tried to look it up, but I was unable to find a straight-forward solution. How should I go about this?
Thank you!
Only add "display: flex;" on the parent element and then add 100% height on button like this
.google{
display: flex;
width: 100%;
}
.sbutton{
height: 100%;
}
JSFIDDLE
I have a Woocommerce search box on my page and I want the button and the search box itself to display in the same line. I tried using the attribute inline-block but it didn't seem to work.
Source code:
<div data-id="b273043" class="elementor-element elementor-element-b273043 searchbar elementor-widget elementor-widget-wp-widget-woocommerce_product_search" data-element_type="wp-widget-woocommerce_product_search.default">
<div class="elementor-widget-container">
<form role="search" method="get" class="woocommerce-product-search" action="https://www.naotech.com/he/">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">חיפוש עבור:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search Products" value="" name="s" />
<button type="submit" value="search">search</button>
<input type="hidden" name="post_type" value="product" />
</form>
I tried adding the following CSS and it didn't work
form.woocommerce-product-search {
display: inline-block ;
}
Here's a link to the page itself.
Just try to add
[id^="woocommerce-product-search-field"] {
width: auto !important;
}
somewhere in the end of last added css file
Try adding the !important rule to this style or styling the input and button. Note that the !important rule should only be used as a last resort as it can't be overridden. Instead you should override styles using ordering of your styles (in this case make sure your custom CSS is included after the WooCommerce CSS) and by using specificity. This is how you would style the input and button:
form.woocommerce-product-search input,
form.woocommerce-product-search button
{
display: inline-block !important;
}
Please use below code to implement inline form for all browsers.
<style>
.form-inline{
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
}
</style>
<form class="form-inline">
<input type="text" name="name" placeholder="Name">
<button type="submit">Submit</button>
</form>
The search input box inside form has width: 100%. Change the width to 50%.
So I have a simple login prompt like this:
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</form>
and the css:
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
https://jsfiddle.net/tzc6Lpur/
What I would like is that the bottom items are stretched over the entire width of the element so that login button would be lined up to the right end of the password box. Something like text-align: justify; would to that for text but I can't find an easy way to do this. Ofcourse I could manually position the elements but that just seems to be a lot redundant code.
any help is appreciated!
The easy way would be to change your markup accordingly:
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<div class="flex-wrap">
<label for="myCheckbox"><input name="myCheckbox" type="checkbox">Remember</label>
Forgot?
Register
<input type="submit" value="Login">
</div>
</div>
</form>
and use the following CSS:
.flex-wrap{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#login{
float:right; //To mantain the form on the right of the screen
}
Flex box is supported by all modern browsers, but if you need to support
JSFiddle: https://jsfiddle.net/silviagreen/hcktxgva/3/
You can Use this to align your button to the right end.
<input id = "login_button" type="submit" value="Login">
and in css add
#login_button{
float:right;
}
You can use twitter-bootstrap-3 which will help you a lot. Take a look into it.
all you have to do is, add one more span and add float:right to it.
take a look at this. https://jsfiddle.net/adityap708/sedLvLp2/
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<span style="float:right;">
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</span>
</form>
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
You can the use flexbox on the wrapper elements which, really, should be block level and not a spans.
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
#login div {
display: flex;
justify-content: space-between;
}
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password">
</div>
<div>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</div>
</form>
The form and button are on the left hand side of the screen, how do I get them in the center?
If I don't include "display: inline;" the form is centered in the middle of the page but as soon as I include it the form is on the left hand side of the screen.
HTML
<div class="rounded">
<FORM name="myForm" method="POST" action=""; onsubmit="validate();">
<input type="text" value="Start time">
<input type="submit" value="Save">
</form>
<button type="submit" onclick="validate1();" >Cancel</button>
</div>
CSS
rounded{
text-align:center;
align:center;
}
form {
margin:0 auto;
text-align:center;
align:center;
display: inline;
}
Check with this fiddle and css.
.rounded{
text-align:center;
}
form {
margin:0 auto;
text-align:center;
display: inline-block;
}
You also need to keep button within form
<div class="rounded">
<FORM name="myForm" method="POST" action=""; onsubmit="validate();">
<input type="text" value="Start time">
<input type="submit" value="Save">
<button type="submit" onclick="validate1();" >Cancel</button>
</form>
</div>
rounded matches <rounded> elements, but your container is a <div> with class="rounded".
Use .rounded to match elements that are members of the rounded class.
Try adding a width and margin to the css of the rounded box like this:
.rounded {
width: auto;
margin: 0 auto;
text-align: center;
/* align: center; - Remove this */
}
This worked on my test of your code.
Try
.rounded
{
text-align:center;
align:center;
}
I want to have my submit button to the right of my search form. But I also want to keep my label above the form field. So it's Label, then on a new line the field with the search button on the same line.
<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/sponster/users/display" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
<div class="input text"><label for="UserSearchForAFriend'sPage">Search For A Friend's Page</label><input name="data[User][Search for a friend's page]" type="text" id="UserSearchForAFriend'sPage" /></div>
<div class="submit"><input type="submit" value="Search" /></div></form>
</div>
Without changing any of your markup:
#UserDisplayForm label { display: block; }
#UserDisplayForm div { display: inline-block; }
Here's a working example. I've assumed you want the styles to apply only within your form, hence I've prefixed the rules with #UserDisplayForm.
Put your <label...> and <input...> tags inside <span...> instead of <div...>
I'd do something simple like:
<... previous elements ...>
<div class="row"> <!-- this is semantically a "form row" -->
<label style="display: block" ...></label>
<input type="text"...>
<input type="submit" ...>
</div>
The simplest ting to do is to change the inner div tags to span tags and add a br break to get to the next line.. :)
<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/sponster/users/display"
accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST" />
</div>
<span class="input text">
<label for="UserSearchForAFriend'sPage">Search For A Friend's Page
</label>
<br>
<input name="data[User][Search for a friend's page]" type="text"
id="UserSearchForAFriend'sPage" />
</span>
<span class="submit"><input type="submit" value="Search" /></span>
</form>
</div>
Or else you could make the label reside in a separate div tag and the textbox and button in separate span tags as shown below.
Search For A Friend's Page
Try this stylesheet:
.searchForm {
clear: both;
display: block;
width: 150px; /* whatever width you want it to be */
}
.searchForm .input {
display: block;
float: left;
margin: 0 10px 0 0;
width: 100px; /* whatever width you want it to be */
}
.searchForm .input label { display: none; /* generally people don't want their label showing when making a search field */
.searchForm .input input { display: block; ... and any other styles ... */
.searchForm .submit {
display: block;
float: right;
margin: 0 0 0 10px;
width: 30px; /* again, whatever width you want it */;
}
This is making the <div>'s float properly. You do not have to put them in <span>'s to make it work, that's just lazy coding.
Chuck in your widths in the styles to whatever you want them to be, and it should work. It really depends on the rest of your code/css.
Good luck!