Bootstrap: Missing border radius on input group with validation feedback

[MoritzBru]

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]

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]

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]

@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]

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]

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

[mdo]

@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]

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]

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]

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

[altbdoor]

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]

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]

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>

[flachware]

I ran into the same issue. How about generally using the :last-of-type selector instead of :last-child in _input-group.scss and switching div.invalid-feedback to p.invalid-feedback?

[claudioalmeiida]

I find another problem when it does not use .dropdown-toggle class, I do not know if it was a known problem
https://codepen.io/anon/pen/BVZMVj

[rushairer]

So that????

[kejodion]

March 2019 and issue still exists. Is there no pull request for a fix?

[mdo]

@kjjdion If you have a fix, we'd love a PR, but otherwise, the lack of a PR means that there is no fix (or that's rather difficult to do).

[nibblesnbits]

Forgive my ignorance, but why would it be more complicated than this?

.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Obviously these are likely overly specific, but these rules seem to fix it in my app.

[chrisbo]

Although a sort of hack, adding the class rounded-right to my form inputs and textarea seems to have fixed my issue.

[rushairer]

Thanks all

[andreanz22]

style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;"

[clementAC]

I have the issue with append group. I have a Dashlane extension that add some impala logo to signify the user the input can be auto-completed (Dashlane is not the only extension to do that). This logo is added to the end of the input so the :not-last selector is not working and apply border radius 0 to the right.
Not sure how to fix that without avoiding the @andreanz22 solution

[ysds]

Sorry, we bootstrap core team don't have any smart way to solve this for v4. Please try the following workaround.

When you are using a medium size input group and don't customize the default border radius values, please add .rounded-right to the missing border radius elements.

Example:

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

When you are using a small or large input-group or customizing the default border radius values, please add custom CSS to the missing border radius elements.

/* Change values to match the radius of your form control */
.fix-rounded-right {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control fix-rounded-right" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

[boskee]

Thanks guys, .rounded-right solves the problem, but since it's a common problem, imho it should be explained in the documentation along with the solution.

And for anyone who lands here later on, here's how to add rounded corners to .input-group-append with validation message:

<div class="input-group">
  <input type="text" class="form-control" required>
  <div class="input-group-append">
    <span class="input-group-text rounded-right">.00</span>
  </div>
  <div class="invalid-feedback">
    Please enter value.
  </div>
</div>

[mdo]

We've added notes to our documentation and improved examples to incorporate the workarounds here. See #30180 and https://github.com/twbs/bootstrap/issues/25110#issuecomment-586565165.

[mdo]

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

[mdo]

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