Search code examples
htmlionic-frameworkbootstrap-5

Input group not displaying correctly on smaller screen size

So I was trying to make a shopping cart page based on this design Reference and it worked on a normal screen size Normal screen. But on smaller screen sizes (Iphone SE specifically) the quantity menu turned into this Smaller screen. How do I shrink it to fit?

Code:

<ion-view>
  <ion-content>
    <h1 class="text-center">Cart</h1>
    <div class="container">
      <div class="row text-center">
        <div class="col-6">Tất cả</div>
        <div class="col-6">Đã mua</div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2 input-group text-center">
          <input type="checkbox" class="form-check-input margin-auto" />
        </div>
        <div class="col-3 text-center">
          <img
            src="scripts\cart\placeholder.png"
            class="img-fluid"
            style="height: fit-content; width: fit-content"
            alt=""
          />
        </div>
        <div class="col-7">
          <div class="row">
            <div class="col-8">
              <div class="row">
                <p>Tên dòng xe</p>
              </div>
              <div class="row">
                <p>Phân loại: Màu sắc</p>
              </div>
              <label for="price" class="">Giá tiền</label>
              <div class="row">
                <div
                  class="input-group-append mw-50"
                  style="width: 20px; height: max-content"
                >
                  <button class="btn btn-primary">-</button>
                  <input
                    type="text"
                    class="form-control text-center"
                    placeholder="1"
                  />
                  <button class="btn btn-primary">+</button>
                  <span class="input-group-text">81 sản phẩm có sẵn</span>
                </div>
              </div>
            </div>
            <div class="col-4">
              <img src="scripts\cart\trashbin.png" width="50" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

At first the page looked like this Non append. Then I added append to the quantity menu but it didn't work

Solution

  • There are several ways to fix the issue, I will goes with d-flex as follow,

    <div class="d-flex flex-wrap">
  <div class="d-flex" style="max-width: 110px;">
    <button class="btn btn-primary">-</button>
    <input type="text" class="form-control text-center" placeholder="1" />
    <button class="btn btn-primary">+</button>
  </div>

  <div>
    <span class="input-group-text">81 sản phẩm có sẵn</span>
  </div>
</div>

    The concept is

    1. use a main d-flex flex-wrap parent container so that input-group-text will goes to bottom when it does not fit into the container
    2. use a d-flex inner container with a max-width to wrap the (+/-) buttons and number input

    Full flex behaviors is over here

    Hope it helps and Happy Coding !

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="card m-3">
  <h1 class="text-center">Cart</h1>
  <div class="container">
    <div class="row text-center">
      <div class="col-6">Tất cả</div>
      <div class="col-6">Đã mua</div>
    </div>
  </div>
  <div class="container-fluid">
  
    <div class="card">
    
    <div class="row">
      <div class="col-2 _input-group text-center">
        <input type="checkbox" class="form-check-input margin-auto" />
      </div>
      <div class="col-3 text-center">
        <img
          src="scripts\cart\placeholder.png"
          class="img-fluid border"
          style="height: fit-content; width: fit-content"
          alt=""
        />
      </div>
      <div class="col-7">
        <div class="row">
          <div class="col-8">
            <div class="row">
              <p>Tên dòng xe</p>
            </div>
            <div class="row">
              <p>Phân loại: Màu sắc</p>
            </div>
            
            <label for="price" class="">Giá tiền</label>
            
            <div class="d-flex flex-wrap">
              <div 
                class="d-flex"
                style="max-width: 120px;"
              >
                <button class="btn btn-primary">-</button>
                <input
                  type="text"
                  class="form-control text-center"
                  placeholder="1"
                />
                <button class="btn btn-primary">+</button>
              </div>

              <div>
                <span class="input-group-text">81 sản phẩm có sẵn</span>
              </div>
            </div>
            
          </div>
          <div class="col-4">
            <img 
              src="scripts\cart\trashbin.png" 
              width="50" 
              alt="" 
              class="border" 
              style="width: 20px; height: 20px" 
            />
          </div>
        </div>
      </div>
    </div>
    
    </div>
    
  </div>
</div>