Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[v4] Modal flickering when within .list-group-item

See original GitHub issue

Hi,

In some cases the modal filckers (see video).

bootstrap

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

Issue Analytics

State:
Created 6 years ago
Reactions:13
Comments:18 (5 by maintainers)

Top GitHub Comments

26reactions

gizburdtcommented, Jan 19, 2018

Quick fix for now:

.list-group-item, .list-group-item:hover{ z-index: auto; }

7reactions

gizburdtcommented, 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.

Top Results From Across the Web

Twitter Bootstrap modal window flickers - Stack Overflow

In my case I had a stuttering/flickering/flattering modal on hover. The solution is: Don't place ... .list-group-item, .list-group-item:hover{ z-index: 1 }.

Bootstrap V5 Modal flickering when within .list-group-item

Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....

Modal is causing flicker of content in the Accordion

This behavior happens every time the Accordion is populated with items and a Modal Component is being used. I tried clearing out the...

Bootstrap Modal blinks, disappears - West Wind Message Board

This works fine on every page EXCEPT 1. On that page, the modal appears for a blink and then disappears. I've been looking...

How to stop modal popup from flickering during postback

When the user types in a value in the popup and hits the save button the popup stays on the screen but it...