NooBskie NooBskie - 3 months ago 22
Sass (Sass) Question

Same line quantity counter (+/-)

I'm having some trouble trying to implement a quantity counter like so

enter image description here

Here is what I have so far (Codepen)

My problem is that I keep getting random white space and it feels the way Im going about wrapping the elements is inefficient. Is there any other way to go about making this?

HTML

<!-- Quantity -->
<div class="quantity-number-v2 clearfix">
<div class="quantity-wrapper">
<i class="add-down add-action fa fa-minus"></i>
<input id="prodQuantity" type="text" name="quantity" value="700" />
<i class="add-up add-action fa fa-plus"></i>
</div>
<div id="stock" class="text-center"></div>
</div>
<!-- /Quantity -->


SCSS

.quantity-number-v2{
margin: 50px;
#prodQuantity{
width: 60px;
height: 30px;
border: 1px solid #222;
}
i{
padding: 6.8px 10px;
border: 1px solid #222;
}
}

Answer

The space is caused as you are lining up inline elements (think words in a sentence - they have spaces between them). You can comment out the space between your elements to remove the space:

<!-- Quantity -->
<div class="quantity-number-v2 clearfix">
  <div class="quantity-wrapper">
    <i class="add-down add-action fa fa-minus"></i><!--
    --><input id="prodQuantity" type="text" name="quantity" value="700" /><!--
    --><i class="add-up add-action fa fa-plus"></i>
  </div>
  <div id="stock" class="text-center"></div>
</div>
<!-- /Quantity -->

Updated Pen