CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
Rozi Buber
Rozi Buber

Reputation: 393

Search box and button don't display in the same line

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.

Upvotes: 1

Views: 2616

Answers (4)

Er Deepak Prabhakar
Er Deepak Prabhakar

Reputation: 458

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>

Upvotes: 2

Banzay
Banzay

Reputation: 9470

Just try to add 

[id^="woocommerce-product-search-field"] {
  width: auto !important;
}

somewhere in the end of last added css file

Upvotes: 2

Jay Ganesan
Jay Ganesan

Reputation: 113

The search input box inside form has width: 100%. Change the width to 50%.

Upvotes: 1

user1247034
user1247034

Reputation:

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;
}

Upvotes: 2

Related Questions