2

I am programming a quantity selector button and want it to be responsive. That is, I want the minus and plus to contain only as much width as the icons need and the input in the middle to be the maximum width.

I am wondering how to approach this using scss.

HTML:

<div class="quantity-select-container">
   <div class="btn btn-minus">
      <span class="icon icon-minus">
      </span>    
   </div>

   <input value="1" type="number" min="1" max="100" step="1" pattern="[0-9]*" class="form-control product-detail-quantity-select">

   <div class="btn btn-plus">
      <span class="icon icon-plus"></span>    
   </div>
</div>

SCSS:

.quantity-select-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 0;
  border: 1px solid black;
  grid-auto-flow: row;
  grid-template-areas: "minus input plus";

  .btn-minus {
    grid-area: minus;
  }

  input {
    text-align: center;
    grid-area: input;
    padding: 2px;
    width: 100%;
  }

  .btn-plus {
    grid-area: plus;
  }

  .btn-minus,
  .btn-plus {
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
}

grid-template-columns: 45px auto 45px; can solve this problem, but not effectively because with a narrow screen the buttons overlap and obscure the input, therefore it works with large screens while in doesn't on tiny screens

nicael
  • 18,550
  • 13
  • 57
  • 90
pseudoselector2
  • 35
  • 4

1 Answers1

0

min-content with clamp are your best friends when it comes to fitting some boxes to its smallest width possible on small screens while maintaining a reasonable width when there's enough space on screen

#grid{
  grid-template-columns: min-content 1fr min-content;
  display: grid;
  font-size:25px;
}
#grid > *{
  display: flex;
  justify-content:center;
  padding-block: 5px;
}
.to-shrink{
  background:red;
  padding-inline: clamp(2px, 3vw, 30px);
}
<div id="grid">
  <div class="to-shrink">smol</div>
  <div>bigg</div>
  <div class="to-shrink">smol</div>
</div>

For a better illustration what does this combo do, check the gif below and notice how paddings are changing due to clamp:

To go further, you can also apply clamp to the font or, in your case, size of the icon itself, while still keeping min-content on grid layout

nicael
  • 18,550
  • 13
  • 57
  • 90