Skip to content

Different way are used to control overlap border of input-group-addon between input-group-btn  #25005

@ysds

Description

@ysds

Regarding overlapping of borders of a grouped element, @mdo commented in #24453 that it is not good way to control the border color. As an alternative, we can use border-width: 0 or negative margin.

In input group, .input-group-addon uses border width to 0, and input-group-btn uses negative margin. I think we should use a same way (negative margin), since .input-group-addon and input-group-btn are similar in principle.

.form-control,
.custom-select,
.custom-file {
+ .input-group-addon:not(:first-child) {
border-left: 0;
}
}

// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: (-$input-border-width);
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions