Missing border radius on input group with validation feedback #25110

MoritzBru · 2017-12-29T00:17:54Z

With new beta 3 and using the new input-group stuff, inputs inside input-groups with some validation feedback after them are missing the border-radius.

red circle: without border-radius
green circle: with border-radius

This is an example from the bootstrap documentation

mdo · 2017-12-29T16:47:13Z

Damn, I'm super disappointed in myself for not catching this during Beta 3. I thought I had this all locked up with that rewrite. This is going to be tough.

/cc @ysds in case he has ideas having looked at some of this code recently

mdo · 2017-12-29T17:16:33Z

I spent an hour on this last night and had nothing, but just had an idea to use the validation state.

  .form-control,
  .custom-select {
    &:not(:last-child) { @include border-right-radius(0); }
    &:not(:first-child) { @include border-left-radius(0); }

    &:not(:last-child):required,
    &:not(:last-child).is-valid,
    &:not(:last-child).is-invalid {
      @include border-right-radius($input-border-radius);
    }
  }

This works on the particular docs example, but I need to see if it doesn't work elsewhere.

ysds · 2017-12-29T17:42:06Z

@mdo I am terribly sorry for the lack of confirmation. There is still a issue. e.g. appended addon:

<div class="input-group mb-3">
  <input type="text" class="form-control is-invalid" placeholder="Recipient's username">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
  <div class="invalid-feedback">
    Please provide a valid zip.
  </div>
</div>

I created various test cases here. https://codepen.io/fellows3/pen/OzmMoz

mdo · 2017-12-29T18:07:30Z

Nice, thanks for the test case. I've forked your pen to:

Add my latest built CSS from my local changes I included in my last comment. This fixes the main validation bug from the docs, as well as the rounding of our file inputs.
Remove validation on multiple inputs—there's no way to do this, and we already explicitly do not support this.

See https://codepen.io/emdeoh/pen/OzmNNw?editors=1100. Have to improve some custom select and custom file, as well as dealing with the appended as you noted.

ysds · 2017-12-29T18:43:37Z

We also have to suppose a .was-validated case like:
https://getbootstrap.com/docs/4.0/components/forms/#custom-styles

mdo · 2017-12-29T19:20:36Z

@ysds That's where I'm hoping :required can help, which I've included in that snippet. Might need to sneak :optional in there, too.

ysds · 2017-12-30T07:39:26Z

I don't have any solution with only CSS3 selector to this issue. It would be impossible.

I think we should move .invalid-feedback to outside of input group. And then, extend .input-group class (.has-valid/invalid) as many times proposed in #23454. That would solve most of the issues (validation feedback of multiple input and combination with custom file input etc.). The .has-valid/invalid class will be unnecessary in the future by :has selector of CSS4.

mdo · 2017-12-30T21:32:44Z

Hmm, that'd be a breaking change from the final beta. I'm pushing for no breaking changes, but we'll see. I agree there doesn't seem to be a solution. I was trying to use some :nth-last-child stuff, but that's a bit messy right now.

mdo · 2018-01-18T06:29:39Z

I have some real funky CSS for y'all in #25352 to address as much of this as I can. 😅

altbdoor · 2018-01-21T09:20:52Z

Just dropping my two cents. I'm using v4.0 at the moment, and I was able to get the rounded corners back on the appended button with:

<div class="input-group">
    <input type="text" class="form-control is-invalid" readonly required>
    
    <div class="input-group-append">
        <button class="btn btn-outline-secondary rounded-right" type="button">
            Hey
        </button>
    </div>
    
    <div class="invalid-feedback">
        Error
    </div>
</div>

It needs an extra declaration of .rounded-right on the element within the .input-group-append. Not the most elegant, but at least it works.

MoritzBru · 2018-01-22T17:43:27Z

Damn, I'm super disappointed in myself for not catching this during Beta 3. I thought I had this all locked up with that rewrite. This is going to be tough

I guess thats what betas are for. 😉

@altbdoor Jep generally this works.
But when you change the $input-border-radius then you run into problems because the border utilities are based on the general $border-radius

cbossi · 2018-03-08T21:29:08Z

I found a solution to the problem using bootstrap's order classes:
You can place the .invalid-feedback element in between the input and the input-group-append element and then append the order-1 class to it. This way the .invalid-feedback element is NOT the last child inside the input-group (which would cause the border radius problem), but nonetheless appears at the end of the input-group:

<div class="form-group">
    <label for="name">Name</label>
    <div class="input-group">
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback order-1">
        Please provide a name.
    </div>
    <div class="input-group-append">
        <span class="input-group-text">
        <i class="fas fa-envelope"></i>
        </span>
    </div>
    </div>
</div>

mdo · 2020-05-14T20:17:30Z

We've added notes to our documentation and improved examples to incorporate the workarounds here. See #30180 and #25110 (comment).

mdo · 2020-05-14T20:17:56Z

We'll also need to revisit this in v5 to see if HTML/CSS breaking changes could fix it without a workaroud.

…lid-feedback element

mdo · 2020-09-16T03:55:24Z

Possible fix with a greatly simplified input group component coming for v5. See #31666 and please let me know your thoughts.

reFX-Mike · 2021-03-30T03:02:49Z

This bug still happens with 5.0.0-beta3 when there are TWO validation fields for a form-group (valid and invalid).

<label for="firstname" class="form-label">{{ site.name }}</label>
<div class="input-group has-validation">
	<span class="input-group-text"><i class="far fa-user-circle"></i></span>
	<input type="text" name="firstname" class="form-control" minlength="2" maxlength="100" required autofocus>
	<div class="invalid-feedback">Please enter a first name (minimum 2 characters)</div>
	<div class="valid-feedback">Looking good</div>
</div>

New .has-validation class was added so validation feedback can move inside input-group. This works ok for simple_form, but the plain HTML version with both .valid-feedback and .invalid-feedback divs loses the rounded end on the input group. See twbs/bootstrap#25110

* Update bootstrap dependency to 5.0.0.beta2 * .custom-* styles merged in to native ones * Use map-merge to add custom colors to theme * Update header markup * Breadcrumbs have no padding now * data-toggle and data-target get 'bs-' prefix * data-placement gets 'bs-' prefix; drop data-trigger * Drop top margin; update horizontal margin * Rework stack/split button group * Hide toggle buttons below medium breakpoint * data-dismiss gets 'bs-' prefix on modal * Use bootstrap's close button on modal * .form-text now subsumes <small> and .text-muted * Drop .form-group-{invalid,valid} They aren't used by bootstrap and .form-group has gone in v5 as well. * verticals: .form-group -> .mb-3 * verticals: labels need .form-label * verticals: .form-control-file -> .form-control * verticals: .form-control -> .form-select Also add :vertical_select wrapper for `<select>` lists used for associations. Without this, the select elements would use the default :vertical_form wrapper and get the .form-control class. * verticals: .form-control-range -> .form-range * verticals: address layout issue with boolean When a boolean is rendered as radio buttons a hidden `<input>` element is added between the `<legend>` and first `<div>` wrapping a radio button. Bootstrap's styling floats the legend left and needs the following element to be cleared, but this does not work if the following element is not displayed. We add an additional rule to target the first following wrapper `<div>`. * Rework event handling for stack/split toggle .active has gone; check for .btn so we only process events from the input elements, not the labels. Don't preventDefault() on the event, so the radio button will toggle. * Get stack/split state from radio buttons * horizontals: .form-group -> .mb-3 * horizontals: .form-control-file -> .form-control * horizontals: .form-control -> .form-select As for horizontals, add :horizontal_select wrapper for `<select>` lists used for associations. Without this, the select elements would use the default :horizontal_form wrapper and get the .form-control class. * horizontals: .form-control-range -> .form-range * horizontals: better range label/input alignment * horizontals: remove duplicate label on boolean * horizontals: fix margin at bottom of form * inlines: .sr-only -> .visually-hidden * inlines: .form-inline replaced with grid * .custom-* form styles have been dropped * input_groups: .form-group -> .mb-3 * input_groups: labels need .form-label * input_groups: prepend/append wrapper div dropped * input_groups: fix password js Needs updating as .input-group-append wrapper div isn't used any more. * floating_labels: built in with v5 * floating_labels: remove `<select multiple>` example Not supported by Bootstrap 5's floating labels implementation. * floating_labels: .custom-select -> .form-select * floating_labels: docs recommend against rows="" * input_groups: add .has-validation, move feedback New .has-validation class was added so validation feedback can move inside input-group. This works ok for simple_form, but the plain HTML version with both .valid-feedback and .invalid-feedback divs loses the rounded end on the input group. See twbs/bootstrap#25110 * remove .d-block where it is not needed * fix inclusion of stylesheets in documentation * Update version number on home page * Replace .media and .media-body * `div` is the default for `tag` in wrappers * Update bootstrap dependency to 5.0.0 * Add `offcanvas` to `application.scss` * Bump bootstrap rubygem to v5.0.1 Co-authored-by: m5o <[email protected]>

fhughes90 · 2022-04-27T14:14:52Z

I'm still seeing this bug in v5.1.

<div class="col-md-2">
   <label for="inputStationID" class="form-label">
      Station ID
   </label>
   <div class="input-group has-validation">
      <span class="input-group-text">
         S
      </span>
      <input type="text" class="form-control" id="inputStationID" placeholder="6392" required>
      <div class="valid-feedback">
         Looks good!
      </div>
      <div class="invalid-feedback">
         This is not an acceptable value.
      </div>
   </div>
</div>

julien-deramond · 2022-07-29T06:40:58Z

Please create a new issue with a reference to this one.

TCB13 · 2022-10-08T15:24:20Z

As expected adding the class rounded-end to the span is a workaround for this issue in 5.2.

 <span class="input-group-text rounded-end"

ysds mentioned this issue Dec 29, 2017

Fix input group border radius issue (#25075) #25076

Merged

mdo added css v4 labels Dec 29, 2017

mdo mentioned this issue Jan 18, 2018

Input group tests and tweaks #25352

Closed

mdo mentioned this issue Jan 18, 2018

[v4 beta-3] [bug] Input group button loses border radius if group has invalid feedback #25359

Closed

rickychilcott mentioned this issue Jan 23, 2018

Datepicker on Boostrap 4.0.0 Broken atatanasov/gijgo#244

Closed

rafalp mentioned this issue Feb 13, 2018

Broken rounded corners for "input-group-prepend" with class "invalid-feedback" #25606

Closed

cbossi mentioned this issue Mar 8, 2018

.invalid-feedback doesn't show for .input-group with an invalid control #23454

Closed

mdo mentioned this issue Mar 28, 2018

Input group addon right corner becomes square when adding a validation element #25946

Closed

mdo closed this as completed May 14, 2020

mdo reopened this May 14, 2020

mdo added v5 and removed v4 labels May 14, 2020

dejakob added a commit to dejakob/bootstrap that referenced this issue Aug 21, 2020

twbs#25110 Do not remove input-group border if child after is an inva…

38f1cf5

…lid-feedback element

dejakob mentioned this issue Aug 21, 2020

#25110 Missing border radius on input group with validation feedback #31518

Closed

mdo mentioned this issue Sep 17, 2020

Simpler input groups #31666

Closed

MartijnCuppens mentioned this issue Oct 22, 2020

Fix input group border radii #31953

Merged

mdo closed this as completed in #31953 Oct 26, 2020

mhw mentioned this issue Apr 6, 2021

Bootstrap 5 updates heartcombo/simple_form-bootstrap#329

Merged

1 task

mhw mentioned this issue May 21, 2021

Minor v5 cleanup heartcombo/simple_form-bootstrap#334

Merged

faresbakhit mentioned this issue May 27, 2021

Add Bootstrap 5 tests/examples/docs coliff/bootstrap-show-password-toggle#3

Closed

dmetzner mentioned this issue Sep 24, 2021

Bump bootstrap from 4.6.0 to 5.1.1 Catrobat/Catroweb#2047

Merged

Jimmys20 mentioned this issue Sep 15, 2022

Addons in combination with validations Megabit/Blazorise#4106

Open

CloCkWeRX mentioned this issue Jan 26, 2024

Upgrade to bootstrap 5 Growstuff/growstuff#3605

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Missing border radius on input group with validation feedback #25110

Missing border radius on input group with validation feedback #25110

MoritzBru commented Dec 29, 2017

mdo commented Dec 29, 2017

mdo commented Dec 29, 2017

ysds commented Dec 29, 2017

mdo commented Dec 29, 2017 •

edited

Loading

ysds commented Dec 29, 2017 •

edited

Loading

mdo commented Dec 29, 2017

ysds commented Dec 30, 2017

mdo commented Dec 30, 2017

mdo commented Jan 18, 2018

altbdoor commented Jan 21, 2018

MoritzBru commented Jan 22, 2018

cbossi commented Mar 8, 2018

mdo commented May 14, 2020

mdo commented May 14, 2020

mdo commented Sep 16, 2020

reFX-Mike commented Mar 30, 2021 •

edited

Loading

fhughes90 commented Apr 27, 2022

julien-deramond commented Jul 29, 2022

TCB13 commented Oct 8, 2022

Missing border radius on input group with validation feedback #25110

Missing border radius on input group with validation feedback #25110

Comments

MoritzBru commented Dec 29, 2017

mdo commented Dec 29, 2017

mdo commented Dec 29, 2017

ysds commented Dec 29, 2017

mdo commented Dec 29, 2017 • edited Loading

ysds commented Dec 29, 2017 • edited Loading

mdo commented Dec 29, 2017

ysds commented Dec 30, 2017

mdo commented Dec 30, 2017

mdo commented Jan 18, 2018

altbdoor commented Jan 21, 2018

MoritzBru commented Jan 22, 2018

cbossi commented Mar 8, 2018

mdo commented May 14, 2020

mdo commented May 14, 2020

mdo commented Sep 16, 2020

reFX-Mike commented Mar 30, 2021 • edited Loading

fhughes90 commented Apr 27, 2022

julien-deramond commented Jul 29, 2022

TCB13 commented Oct 8, 2022

mdo commented Dec 29, 2017 •

edited

Loading

ysds commented Dec 29, 2017 •

edited

Loading

reFX-Mike commented Mar 30, 2021 •

edited

Loading