Prevent input-group-append from pushing neighboring input-group on right

so I have this input-group with an input-group-append button that renders on some condition. However, when I have two input fields next to each other and render the input-group-append for the first one, this button pushes the neighboring right input field on right, decreasing its width. This is the sandbox that I use for this example: code sample. As you can see, when I type something in Recipient's username, it renders the button and pushes Recipient's password on right. I’d like to prevent this and render the button without having any modifications on the input fields themselves. Example without the code.

Source: CSS – Stack Overflow

November 22, 2021
Category : News
Tags: bootstrap-4 | css | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.