Stop flex child from shrinking in size

I have a form row with two inputs. There is a requirement to show ⚠️ (warning emoji) next to the second input in the row, based on the input number.

However, because of how flexbox behaves, the input size gets reduced... How can I maintain the input size and still display the warning emoji beside it?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a5a41464147544575011b001b06">[email protected]</a>/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>

htmlcssreactjsbootstrap-4flexbox

Answer №1

To ensure the warning sign does not disrupt other elements, you can assign it a position of absolute:

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

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

For clarity and organization, consider giving the elements distinct class names.

Answer №2

One possible solution is to adjust the width of a textbox using CSS styling.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5e445f4459">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve the reference value from a dropdown box and pass it to another component?

Currently, I am in the process of creating a chat application using socket.io. Within this application, there is a dashboard component that consists of two child components known as Room.js and Chat.js. The Room component serves the purpose of selecting th ...

javascriptreactjssocket.iorefchatroom

The tab indicator in Material-UI fails to update when the back button is clicked

My code is currently functioning well: The tab indicator moves according to the URL of my tab. However, there is a peculiar issue that arises when the back button of the browser is pressed - the URL changes but the indicator remains on the same tab as befo ...

javascriptreactjsmaterial-uitabs

Having trouble spinning the picture using Reel in Reactjs

I have recently started learning React and I am attempting to use jQuery reel to rotate a list of images by 360 degrees. While I have successfully implemented this using purely jQuery, I now want to migrate it over to Reactjs. The issue arises when trying ...

jquerynode.jsreactjsjquery-reel

Error: Unable to locate module 'react-addons-update' in directory 'E:Reduxcalcsrc'

I recently encountered an issue while working with ReactJS. The error occurs when attempting to mutate a copy of data without modifying the original source. To address this, I imported the update method from the package 'react-addons-update': h ...

reactjsnpm

Aggregate the data entered into input fields on one page and display them on a separate page

Can you help me with this task? - I have 2 pages set up (page 1 has input fields & page 2 is where the entered data should be displayed) - I want to retrieve all the text input from the first field and insert it into the "content" tag on the second page. ...

javascriptjqueryhtml

What is the process for dividing a form into two separate columns?

I am working on a form that sends input to a PHP script. I want to reorganize the form so that the second section (Person 2) appears in a column to the right of the first section (Person 1), instead of below it. <link rel="stylesheet" href="test.css" ...

htmlcssforms

Is it possible for a media query to target only 2 elements instead of all 3?

Currently, I am dealing with an older website for a client, and it appears that a media query is not correctly affecting three specific classes out of the total. These problematic classes are .free-ship, .wholesale, .chronicles The CSS styling for these c ...

htmlcssjoomla

"Enforce a specific height on a div that is exclusively showing a background

I have been trying to use a div element to showcase a specific color, where the background color acts as the content. However, no matter what height or width settings I input, I am unable to achieve the desired size for the div. Even after experimenting w ...

htmlblazorheight

Is there an easy method to verify if the local storage is devoid of any data?

Query is named aptly; seeking to verify in a conditional statement. ...

javascripthtmllocal-storage

Error: Unable to delete item because the delItemRow function is not defined for this.props

No matter what I try, I can't seem to get the delete functionality to work on my React TO-DO list. I've spent all day attempting different methods but have had no success. It seems like I'm missing something, and I just can't figure out ...

node.jsreactjsnpmwebpackbabel-loader

Looking for assistance with creating a responsive design that works seamlessly on all large devices

Our UI/IX designer has provided a design that I need to replicate. https://i.sstatic.net/8nXym.png I am facing difficulties in centering the circular part of the image. (The vertical line and circular part are separate images) I experimented with using ...

htmlcssbootstrap-5

Gradient background overlaid with a blended SVG shape

Creating a full gradient background with a clipping mask can be tricky. I used an SVG to achieve the desired shape by cutting part of the background color, but now I'm facing a challenge with blending the colors seamlessly. I tried setting the SVG co ...

htmlcsssvg

The term "define" is not recognized when constructing a Next.js application

Currently, I am working with Next version 10.0.1 and React 17.0.2. While attempting to build my Next app, I encountered the following error: ReferenceError: define is not defined at Object.<anonymous> (/Users/username/Desktop/project/node_module ...

reactjstypescriptnext.jsamddefined

Eliminating unnecessary CSS classes

There are multiple references to the specific ".wiki-content" class in the stylesheet: .wiki-content ul,.wiki-content ol,.wiki-content dl { padding-top:0; margin-top:0; } .wiki-content a,.wiki-content a:link,.wiki-content a:visite ...

csshtml

Transforming an HTML document into a C# string representation

I need help creating a basic HTML file and then dynamically loading it as a string in C#. I attempted using File.Open, but the file is located separately from the binary code. Is there an easy way to instruct the build process to load it into a string? ...

c#asp.nethtml

Issue with the dimensions and proportions of the canvas

After creating a canvas with HTML and setting the ratio to 16/9 in the CSS, I specified a width of 100vw and added a border. However, I noticed that the canvas appeared larger than expected on the screen. #canvas{ width: 100vw; aspect-ratio: 16/9; border: ...

css

Is there a method to instruct crawlers to overlook specific sections of a document?

I understand that there are various methods to control the access of crawlers/spiders to documents such as robots.txt, meta tags, link attributes, etc. However, in my particular case, I am looking to exclude only a specific portion of a document. This por ...

javascripthtmlseoweb-crawler

Error: Your call to the "useFormState" function does not match any available

I am fairly new to web application development and I'm facing an issue with the useFormState function. I am currently working on building an edit form for database entries, but the code that previously worked is now throwing an error stating that ther ...

reactjstypescriptnext.js

What is the best way to bind the value of total when working with forms and the bind method?

I am working on a form where I need to pass the value of total. Regarding the total: I have successfully passed the value of the cart, which is an array. const [total, setTotal] = useState<number | undefined>(undefined); const calculateTotal = () ...

javascriptreactjstypescriptformsnext.js

Navigate between links by using the Tab key, while excluding certain links from the sequence

On my webpage, I have a main menu, various links in the main content area, and a left menu. The challenge is to make the website accessible for people who are blind... When using the tab button to navigate between links, the order currently goes as follow ...

htmlcss