How can i fill button in the container?

Question

I want to fill the button in the rest empty of the container. I've tried it with display: table-cell;width: 100%; but it's not working.

I use bootstrap 3 btn-block not working too.

I can set width with px for <button> but when i remove the <div class="product-social-links"> i get again white pleace in the container.

Current state:

What i want to do:

<div class="product-info-actions">
    <div class="product-add-form">
        <form data-product-sku="24-UG01" action="xxxx" method="post" id="product_addtocart_form" novalidate="novalidate">                           
            <div class="box-tocart">
                <div class="fieldset">
                    <div class="field qty">
                        <label class="label" for="qty"><span>Qty</span></label>
                        <div class="control control-qty-cart">
                            <span class="quantity-controls quantity-minus"></span>
                            <span class="quantity-controls quantity-plus"></span>
                        </div>
                    </div>
                        <div class="actions" style="font-size: 20px;">
                            <button type="submit" title="Add to Cart" class="action primary tocart" id="product-addtocart-button">
                                <span><i class="fa fa-shopping-cart" style="color: white;"></i>&nbsp;Add to Cart</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="product-social-links">
        <div class="product-addto-links" data-role="add-to-links">
            <a title="Add to Wish List" href="#" class="action towishlist" data-post="" data-action="add-to-wishlist">
                <span>Add to Wish List</span></a>
            <a title="Add to Compare" href="#" data-post="" data-role="add-to-links" class="action tocompare">
                <span>Add to Compare</span>
            </a>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

It's not clear what you mean by "fill button". Your screenshot shows an element with the class "product-info-actions", but that element is not present in the HTML you share. — Heretic Monkey, Oct 18 '20 at 00:43

coderboy · Answer 1 · 2020-10-18T02:35:48.870

0

You can try this

<button style="width:auto!important" type="submit" title="Add to Cart" class="action primary tocart" id="product-addtocart-button">
<span><i class="fa fa-shopping-cart" style="color: white;"></i>&nbsp;Add to Cart</span>
</button>

Try this new code, hopefully it works and then you can adjust the width as you like.

edited Oct 18 '20 at 02:35

answered Oct 18 '20 at 01:32

coderboy

741
2
17

are you using bootstrap – coderboy Oct 18 '20 at 02:05
Yes, but it may have been modified. – Efex Oct 18 '20 at 02:13
You can also learn the flex method, its quite easy and you could also get some live exmaple throught this link https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 – coderboy Oct 18 '20 at 02:41

score 0 · Answer 2 · edited Oct 18 '20 at 02:29

It seems the div with class fieldset contains 2 divs:

one with class field qty (has qty controller)
other one with class actions (has add-to-cart button)

You can use flexbox to solve this scenario.

Steps to take:

(1) attach display:flex to fieldset

(2) attach flex:1 to actions

(3) make the button inside actions div to be width 100% with w-100 class

Could look like so:

<div class="fieldset" style="display:flex">
  <div class="field qty">
    <label class="label" for="qty"><span>Qty</span></label>
    <div class="control control-qty-cart">
      <span class="quantity-controls quantity-minus"></span>
      <span class="quantity-controls quantity-plus"></span>
    </div>
  </div>
  <div class="actions" style="font-size: 20px; flex:1">
    <button type="submit" title="Add to Cart" class="action primary tocart w-100" id="product-addtocart-button">
      <span><i class="fa fa-shopping-cart" style="color: white"></i>&nbsp;Add to Cart</span>
    </button>
  </div>
</div>

This will ensure that div with actions class expands to take as much space as is available (depending on device size) and that in turn will make the button take all the space.

How can i fill button in the container?

2 Answers2