New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing border radius on input group with validation feedback #25110

Open
MoritzBru opened this Issue Dec 29, 2017 · 15 comments

Comments

Projects
None yet
8 participants
@MoritzBru

MoritzBru commented Dec 29, 2017

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.

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

This is an example from the bootstrap documentation

@mdo

This comment has been minimized.

Member

mdo commented Dec 29, 2017

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

This comment has been minimized.

Member

mdo commented Dec 29, 2017

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

This comment has been minimized.

Contributor

ysds commented Dec 29, 2017

@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

This comment has been minimized.

Member

mdo commented Dec 29, 2017

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

This comment has been minimized.

Contributor

ysds commented Dec 29, 2017

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

@mdo

This comment has been minimized.

Member

mdo commented Dec 29, 2017

@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

This comment has been minimized.

Contributor

ysds commented Dec 30, 2017

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

This comment has been minimized.

Member

mdo commented Dec 30, 2017

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 mdo added this to Inbox in v4.0 stable via automation Jan 4, 2018

@mdo mdo added this to Inbox in v4.1 via automation Jan 18, 2018

@mdo mdo removed this from Inbox in v4.0 stable Jan 18, 2018

@mdo

This comment has been minimized.

Member

mdo commented Jan 18, 2018

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

@altbdoor

This comment has been minimized.

altbdoor commented Jan 21, 2018

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

This comment has been minimized.

MoritzBru commented Jan 22, 2018

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

@mdo mdo moved this from Inbox to Needs review in v4.1 Feb 11, 2018

@mdo mdo moved this from Needs review to Inbox in v4.1 Feb 11, 2018

@cbossi

This comment has been minimized.

cbossi commented Mar 8, 2018

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 mdo added this to Inbox in v4.1.1 via automation Mar 29, 2018

@mdo mdo removed this from Inbox in v4.1 Mar 29, 2018

@mdo mdo added this to Inbox in v4.1.2 via automation Apr 24, 2018

@mdo mdo removed this from Inbox in v4.1.1 Apr 24, 2018

@flachware

This comment has been minimized.

flachware commented May 31, 2018

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?
appended-button
appended-button-ok

@claudioalmeiida

This comment has been minimized.

claudioalmeiida commented Jun 13, 2018

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

image

@mdo mdo added this to Inbox in v4.1.3 via automation Jun 21, 2018

@mdo mdo removed this from Inbox in v4.1.2 Jun 21, 2018

@mdo mdo added this to Inbox in v4.2 via automation Jul 16, 2018

@mdo mdo removed this from Inbox in v4.1.3 Jul 16, 2018

@ndm2 ndm2 referenced this issue Jul 16, 2018

Open

Various Bootstrap 4 variant issues/suggestions #223

9 of 12 tasks complete
@rushairer

This comment has been minimized.

rushairer commented Aug 13, 2018

So that????

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment