coreui/coreui-angular

No rounded corner for Button addons with c-form-feedback

Opened this issue · 1 comments

If you use a Button addon inside a c-input-group, which has a c-form-feedback too, the corners of the button are not rounded anymore.

Button is square:

<c-input-group>
  <select cSelect>
  </select>

  <a cButton color="secondary" variant="outline">dummy</a>

  <c-form-feedback [valid]="false">dummy</c-form-feedback>
</c-input-group>

Button has rounded corners:

<c-input-group>
  <select cSelect>
  </select>

  <a cButton color="secondary" variant="outline">dummy</a>
</c-input-group>

On further analysis this does not only apply for buttons, but for other controls too, als long as a c-form-feedback is the last element.
In the following example, the input will have no rounded corners on the right side:

<c-col>
  <label cLabel for="lastName">Last name</label>
  <c-input-group>
    <input cFormControl id="lastName" formControlName="lastName" type="text" required [valid]="isFormControlValid('lastName')" />
    <c-form-feedback [valid]="false">Please specify a valid last name.</c-form-feedback>
  </c-input-group>
</c-col>