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%.
Related
So I'm basically making a form but I was requested to place the placeholder text above the text like this form that I need to make
But I can't figure out how to do that. I tried placing the text as a label over the input field but when I change the size of the browser the alignment is all over the place so I want to the label to align with the input field above it.
Here is what I tried doing:
.row {
display: flex;
justify-content: space-around;
padding: 10px;
}
<div class="row">
<!-- Name of Company -->
<label class="comp" for="company" style="left: 40px;">Company</label>
<input type="text" id="company" name="company" placeholder="Company" />
<!-- Clients First Name -->
<label class="comp" for="firstname">First Name</label>
<input type="text" id="firstname" name="firstN" placeholder="First Name" />
</div>
But what I get is this.
Is there anyone that can help me with this?
Move the <input /> inside of the <label /> and display: block; it. If you want to separately style the text, wrap it in a <span />.
.row {
display: flex;
justify-content: space-around;
padding: 10px;
}
input {
display: block;
}
<div class="row">
<!-- Name of Company -->
<label class="comp">
Company
<input type="text" id="company" name="company" placeholder="Company" />
</label>
<!-- Clients First Name -->
<label class="comp" for="firstname">
First Name
<input type="text" id="firstname" name="firstN" placeholder="First Name" />
</label>
</div>
Placeholder vs. Label.
You can not move the input placeholder text outside of the designated input. Placeholder text is strictly handled by the browser. You may only modify the content using the placeholder="" HTML property and style it with CSS pseudo class ::placeholder.
Instead use the label HTML element like so: (reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
<div class="preference">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
</div>
Display Label Above Input.
Now, you mentioned your label is appearing to the left of the input instead above it? You will need to style your CSS like this. Add the following CSS markup:
label {
display: block;
}
I would also recommend, but not required, setting the display element on your input fields to block as well.
input {
display: block;
}
Why?
By default label is rendered as display: inline; or display: inline-block; by your browser user-agent. Setting it to display: block; will ensure it will always appear above and not inline with the input.
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
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.
I have the following HTML:
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
</div>
<div class="form-group">
<button class="btn btn-default">Add</button>
</div>
</form>
The issue I am facing is that these two elements aren't taking the entire line (they aren't touching). See here:
Why is this the case?
Here is a fiddle show casing the problem: https://jsfiddle.net/nirchernia/pyfetd4p/
A couple of things:
form-group is display:block.
put both the input and button tag inside the same form-group
The form-control is a display:block as well. Use CSS to force it to display:inline-block and shorten the width (it was 100%).
jsfiddle: https://jsfiddle.net/b6x12fc8/
<div class="form-group">
<input class="form-control" type="text" placeholder="Your comments" />
<button class="btn btn-default">Add</button>
</div>
.form-inline .form-control { width:75%; display:inline-block;}
Give following css. Because currently it will taking width:auto; So, it will take default width of input field.
To make it touch with button. Give 100% and there is padding given so, it will increase more width and overlap the button. So, remove padding but padding:0
.form-inline .form-control {
padding: 0;
width: 100%;
}
https://jsfiddle.net/pyfetd4p/1/
To make side by side in small screen use following css;
.form-inline {
display: flex;
}
Fiddle link
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!