Repository navigation
[v4] Modal flickering when within .list-group-item #25206
Description
Hi,
In some cases the modal filckers (see video).
This is the html:
<div class="row align-items-center">
<div class="col-md-6">
<strong>Test</strong> <br>
Street 1 31 <span><span class="badge badge-info">Primary</span></span> <br>
1234AA Amsterdam <br>
</div>
<div class="col-md-6 text-right"><!---->
<div class="d-inline-block text-left">
<a href="#" class="btn btn-sm btn-warning">Edit</a>
<div tabindex="-1" role="dialog" id="editModalLHzoKhSu" class="modal fade">
<div role="document" class="modal-dialog">
<form class="modal-content">
<div class="modal-header"><p id="editAddressModalLabel" class="modal-title h5">Edit address</p> <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
// Form
</div>
</form>
</div>
</div>
</div>
</div>
</div>If you need more info, please let me know :)
- OS: MacOS,
- Browser: Chrome 63.0.3239.84
Reacted by Nam Nguyen, Ian Bussières, Nathan Soares, Lea Bialachowski, Steven Grant, Joe Freeman, imjamespond, Nikia Shaw, Kevin Sylvestre, Yifan Lu and 2 more
Activity
Ruffio commentedon Jan 5, 2018
@gizburdt do you have some custom css/js that can cause this? Can you make a jsbin or similar that demonstrates this behaviour?
Johann-S commentedon Jan 5, 2018
Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.
gizburdt commentedon Jan 9, 2018
Hmm, will have a look at it. The code is nested in my project (and Vue), so I will have a try moving it to JSbin.
Extra info: The error is not present in 4.0.0-beta.2, but it is in 4.0.0-beta.3
gizburdt commentedon Jan 18, 2018
Here is the JS bin: https://jsbin.com/sitemohuno/2/edit?html,js,output
The problem happens when the modal is within a list-group-item. Normally I place my modals at the bottom of the body, but I can't in my current project, because i'm using vue components.
[-][v4] Modal flickering in some cases[/-][+][v4] Modal flickering when within .list-group-item[/+]gizburdt commentedon Jan 18, 2018
@Johann-S Looks like this is causing the problem:
.list-group-item:hover{ z-index: 1; }namnh06 commentedon Jan 19, 2018
I met this problem already, not happen in beta 2 but in beta 3, it's very annoy. It happen in list-group-item confirm.
Using SPA Angular Js + bootstrap 4 beta 3.
Run on Chrome, ubuntu 16.04.
ysds commentedon Jan 19, 2018
This is not a browser bug. This occurs because the
z-index: 1of a.list-gorup-item:hovercause a new stacking context.I created a very simple pen: https://codepen.io/anon/pen/ppqbeq
You can see the modal backdrop (z-index: 1040) is above the modal (z-index: 1050) when hovering.
namnh06 commentedon Jan 19, 2018
@ysds any idea to fix this bug man ?
ysds commentedon Jan 19, 2018
I don't have a solution right now, but it is certain to put a modal HTML outside a item without z-index.
gizburdt commentedon Jan 19, 2018
Quick fix for now:
.list-group-item, .list-group-item:hover{ z-index: auto; }ysds commentedon Jan 19, 2018
Now is the time to back to #16432 !
namnh06 commentedon Jan 22, 2018
@gizburdt Thank you, it's worked.
@ysds Thank to you.
ibussieres commentedon Jan 23, 2018
Strangely, the same solution did not work for me. On bootstrap 4.0.0.
namnh06 commentedon Jan 23, 2018
@ibussieres i'm working on bootstrap 4.0.0 after upgrade from beta 3, it's still working bro.
ibussieres commentedon Jan 23, 2018
I've got it working now. Thanks !
nathanosoares commentedon Jan 27, 2018
it works on 4.0.0
@gizburdt Thank you
mdo commentedon Apr 1, 2018
Duplicate of #23916.
YunshuaiPeng commentedon Nov 20, 2018
可以使用了,thanks!
@gizburdt