Click here to Skip to main content
15,067,629 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi Team

I have dropdownlist and im using inside the modal popup for specification reason. Somehow is not showing well and need some help.

What I have tried:

 <!--Bootstrap modal popup-->

    <div class="bs-example">
        <!-- Button HTML (to Trigger Modal) -->
        <button type="button" class="btn btn-lg btn-primary">POC</button>

        <!-- Modal HTML -->
        <div id="myModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Checklist System</h5>
                        <button type="button" class="close" data-dismiss="modal"</button>
                    </div>
                    <!-- Basic dropdown -->
                    <a class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">Basic dropdown</a>

                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                    <!-- Basic dropdown -->
                    <div class="modal-body">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="defaultChecked2" checked>
                            <label class="custom-control-label" for="defaultChecked2">Default checked</label>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
Posted
Updated 27-Sep-21 21:26pm

1 solution

Use the correct markup for the Bootstrap modal, and add the appropriate trigger to your button.
HTML
<button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">POC</button>

...

<div class="modal-body">
    <!-- This needs to be INSIDE the modal-body element: -->
    <a class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown" aria-haspopup="true"
       aria-expanded="false">Basic dropdown</a>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
    
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="defaultChecked2" checked>
        <label class="custom-control-label" for="defaultChecked2">Default checked</label>
    </div>
</div>
...
Demo[^]
Modal · Bootstrap v4.6[^]
   
Comments
Tgcobza Mkontwana 28-Sep-21 7:57am
   
@Richard thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900