Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Form input with input-group-prepend and valid-feedback/invalid-feedback lose border radius

See original GitHub issue

The border-radius is not rounded when form with input-group-prepend and (valid-feedback or invalid-feedback) lose border-radius.

Normally with input-group-prepend only: 2019-09-28

Normally with invalid-feedback only: 2019-09-28 (1)

But with both input-group-prepend and invalid-feedback lose border-radius on the right side: 2019-09-28 (2)

Code that regenerate the border bug:

<div class="col-md-4 mb-3">
  <label for="validationCustomUsername">Username</label>
  <div class="input-group">
	<div class="input-group-append">
	  <span class="input-group-text" id="inputGroupPrepend">@</span>
	</div>
	<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
	<div class="valid-feedback">
	  Please choose a username.
	</div>
  </div>
</div>

You can see the bug in Bootstrap document too https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

frouocommented, Feb 1, 2020

I reopen a similar issue since the bug remains in bootstrap 4.4 https://github.com/twbs/bootstrap/issues/30116

1reaction

BattlefieldDuckcommented, Jan 24, 2020

The solution of this is add a .rounded-right in input. See: https://tatlead.com/bootstrap/BUG-FormInputBorderRadius.html

Top Results From Across the Web

border-radius issue with input type text - Stack Overflow

I found two ways to fix this appearance. Simply set border: 1px solid black; and you notice that the border will lose that...

Input group not showing borders - Material Design for Bootstrap

I am trying to add a textbox (input) with borders. ... <div class="input-group md-form form-sm form-5 pl-0"> <input type="text" class="form-control mt-0 ...

border-radius - CSS-Tricks

The border-radius property takes between one and four length or percentage values, where one value sets the radius for all four corners at...

I can't get the border-radius to apply on my form - Jotform

I managed to apply border-radius when I injected CSS in the advanced designer. However, when I go to the preview, I lose my...

Jagged Little Pill: Issues with Rounded Buttons - Cloud Four

The larger the value, the more rounded the corners appear. ... For smaller border-radius values or wider buttons, this loss in touch target ......