input-group btn border overlap when hovered

[oalexdoda]

The
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group
property should have z-index:2 to prevent a border overlapping issue on input-group when hovering.

Here is a demo video:
https://www.dropbox.com/s/wq13tw1ttz9oah4/bootstrap_bug.mov?dl=0

[nextgenthemes]

Nice but I am wondering if a z-index 2 (or any value for that matter) will not open up more problems when using this elements inside other z-indexed elements like modals and where bootstrap uses height z-indexes of 1000+ or just some custom z-indexed elements users may use.

[oalexdoda]

Good point! Maybe assigning a z-index value higher than the top possible component helps. Or maybe the input inside the group should not have a border-right and the button should not have negative margin? There are many approaches to fix this :)

[matthiaz]

Nice but I am wondering if a z-index 2 (or any value for that matter) will not open up more problems when using this elements inside other z-indexed elements like modals and where bootstrap uses height z-indexes of 1000+ or just some custom z-indexed elements users may use.

@alexandrudoda yeah... I have an input-group on a modal popup and I was receiving a very strange issue. On focus I can't type anything in the field.

I fixed this by adding z-index: 9000 but it might be a good idea to reopen this issue and raise the z-index.

[trevorr]

I've just noticed this change causes the focus outline of inner buttons to be covered:

Removing it results in the desired appearance:

I don't understand this issue, since the demo video link is now broken, but why does the fix only apply to .input-group-btn:last-child and not the analogous .input-group-btn:first-child? Perhaps active/focused buttons should get z-index: 3, similar to .form-control:focus?