Bootstrap Modal is getting hidden when window is resized

Question

I am working on a web page where i am using bootstrap drop down and modal popup.

I am placing the modal popup inside drop down div. The popup is opening and working perfectly.

What issue i am getting is whenever i resize the window, modal popup is getting hidden when window comes to its minimum width.

I want the popup to stay on page.

Below is the code:

<div class="btn-group dropdown">
        <button type="button"
                id="btnCalculate"
                data-toggle="dropdown"
                class="dropdown-toggle">
            Calculate
        </button>
        <div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
            <div class="col-md-12">
                <row>
                    <label class="control-label">Test</label>
                    <button name="getBalance"
                            type="submit"
                            data-toggle="modal"
                            data-target="#myModal"
                            class="btn btn-default"
                           >
                        Balance
                    </button>
                </row>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Thanks

Answer 1

Attach the modal to <div class="container"> tag directly, not to the dropdown menu.

Just like the following:

<div class="container">
    <div class="btn-group dropdown">
        <button type="button"
                id="btnCalculate"
                data-toggle="dropdown"
                class="dropdown-toggle"> Calculate </button>
        <div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
            <div class="col-md-12">
                <row>
                    <label class="control-label">Test</label>
                    <button name="getBalance"
                            type="submit"
                            data-toggle="modal"
                            data-target="#myModal"
                            class="btn btn-default">
                        Balance
                    </button>
                </row>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>

    </div>

It is not prefarble to place modals within low-level position such a dropdown menu. See how modals work

Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.

However, if you insist to keep your modal within the dropdown menu, you need to prevent the dropdown menu from being closed when the modal is called, and ensure it is placed on the top of .modal-backdrop

JS code:

$('.dropdown').on('hide.bs.dropdown', function () {
     return false;
}); 

and add z-index:auto to dropdown-menu style