Skip to content
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

Elements in an input group below a selectpicker have a higher z-index, causing them to appear above the opened menu #2078

Closed
BI7PRK opened this issue Aug 27, 2018 · 7 comments

Comments

@BI7PRK
Copy link

BI7PRK commented Aug 27, 2018

default

I have tried to rewrite,
it has not been solved.

@caseyjhol
Copy link
Member

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via Plunker, jsFiddle, CodePen or JS Bin, and report back with your link, Bootstrap version, bootstrap-select version, and specific browser and OS details.

@TomKrakott
Copy link

TomKrakott commented Nov 29, 2018

Since 1.13.0, when you place the select in input-group, you've got this case :
https://jsfiddle.net/Thanaucy/6v01gfrs/
Work in 1.12.4

@bazineta
Copy link

bazineta commented Feb 2, 2019

Have this issue as well. @caseyjhol, if you've got a pointer on where to look, I can take a stab at it.

@bazineta
Copy link

bazineta commented Feb 6, 2019

@caseyjhol Just trying to move the ball forward here; it seems that the issue I'm seeing stems from line 23 of bootstrap-select.less:

z-index: 1;

If I comment that out, my issue seems to go away without breaking anything else, at least so far as I can see at the moment. The purpose of that particular z-index is at present unclear to me, but it's not as if that's saying much, really...the set of things that are unclear to me is, regretfully, quite large.

@caseyjhol
Copy link
Member

caseyjhol commented Feb 13, 2019

@bazineta That was first introduced in commit 9dfbe55 when support for HTML5 validation was added. Originally, the select was inserted after the button, which is why z-index needed to be set on the button. Since commit 303eb95, though, where support for pseudo class styling was added, setting the z-index there has been unnecessary (as the select element is now before the button). Thanks for catching that! Will get this out in the next release.

@caseyjhol
Copy link
Member

This issue mostly stems from the fact that since v1.13.0-beta, the input-group-btn class is no longer automatically applied to the .bootstrap-select div (as styling is automatically inherited).

caseyjhol added a commit that referenced this issue Feb 13, 2019
…ide an input-group. Remove unnecessary z-index: 1 on .dropdown-toggle. Remove unnecessary border-radius: 0 from .btn inside input-group-btn (border-radius is already using inherit elsewhere) (#2078)
@BI7PRK BI7PRK closed this as completed Feb 14, 2019
@caseyjhol caseyjhol reopened this Feb 14, 2019
@caseyjhol caseyjhol changed the title z-index, It like a bug? Elements in an input group below a selectpicker have a higher z-index, causing them to appear above the opened menu Mar 8, 2019
@caseyjhol
Copy link
Member

Released in v1.13.6!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants