Question 259626 in Html Question posted in
Some basic documentation can be found here.

Html – Prevent flex child to shrink

I have a from row with two inputs. There is a logic to display ⚠️ (warning emoji) next to the last input on the row, depending on the input number.

However, due to how flex box works, the input shrinks… What do I need to do to keep the size of input same and display the warning emoji next to it?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row py-3 border-bottom order-line-item mx-0">
  <div class="col-6 pl-3 pr-4">
    <div class="d-flex align-items-center flex-fill product-detail-field cursor-pointer">
      <div class="d-flex align-items-center flex-fill">
        <div class="ml-3 d-flex flex-column align-items-start flex-fill">
          <div class="d-flex align-items-center w-100">Snowboard</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-2 d-flex align-items-center">
    <div>
      <input type="number" name="unitPriceAmount" class="form-control undefined" min="0" value="0">
    </div>
  </div>

  <div class="col-2 d-flex align-items-center">
    <div class="d-flex align-items-center flex-row">
      <input type="number" name="quantity" class="form-control undefined" min="0" value="0">
      <span class="ml-1" title="Some Warning">⚠️</span>
    </div>
  </div>

  <div class="col d-flex align-items-center justify-content-end">
    <div>€0</div>
  </div>

  <div class="col-form-label ml-2 d-flex align-items-center"><span class="cursor-pointer ml-auto mr-1"><i class="fas fa-times"></i></span></div>
</div>
Tags:

2

Answers


  1. 0

    You might try this. You can set textbox width using CSS.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row py-3 border-bottom order-line-item mx-0">
  <div class="col-6 pl-3 pr-4">
    <div class="d-flex align-items-center flex-fill product-detail-field cursor-pointer">
      <div class="d-flex align-items-center flex-fill">
        <div class="ml-3 d-flex flex-column align-items-start flex-fill">
          <div class="d-flex align-items-center w-100">Snowboard</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-5 d-flex align-items-center">
    
      <input type="number" name="unitPriceAmount" class="form-control undefined" style="width: 100px" min="0" value="0">
       <div class="d-flex align-items-center flex-row ml-2">
      <input type="number" name="quantity" class="form-control undefined" style="width: 100px" min="0" value="0">
      <span class="ml-1" title="Some Warning">⚠️</span>
    
    </div>
  </div>

  <div class="col d-flex align-items-center justify-content-end">
    <div>€0</div>
  </div>

  <div class="col-form-label ml-2 d-flex align-items-center"><span class="cursor-pointer ml-auto mr-1"><i class="fas fa-times"></i></span></div>
</div>
    Login or Signup to reply.
  2. 0

    You can give the warning sign a position of absolute so it is removed from the flow and won’t effect any other elements:

    .d-flex.align-items-center.flex-row {
  position: relative;
}

.ml-1 {
  position: absolute;
  left: 100%;
}

    It will be better if you could give the elements some specific class names.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search