HTML select's options get out of parent div

I have a bootstrap modal and form inside it. form has select tag with options generated from database. it is a long list of names. the problem is it gets out of modal-body container.

HTML:

<div id="extrusion-modal" class="modal fade" role="dialog">
      <div class="modal-dialog  modal-lg" role="dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <form action="Action.cfm" method="POST" class="form-group">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                    <p>Machine ID = <span class="machine-id"></span></p>
                </div>

                <div class="modal-body" style="overflow: visible;">
                    <div class="form-group">
                        <cfoutput>
                            <input type="hidden" name="actionID" value="">
                            <input type="hidden" name="tMID" value="">
                            <select class="form-control input-lg">
                                <optgroup>
                                    <cfloop query="operator">
                                        <option value="#EmployeeID#" <cfif session.tOperator IS EmployeeID>selected</cfif>>#ename#</option>
                                    </cfloop>
                                </optgroup>
                            </select>
                        </cfoutput>
                    </div>
                </div><!--- /.modal-body --->
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">Change Screen</button>
                </div>
            </form>
        </div>
      </div>
    </div><!--- .modal --->

JavaScript:

$('##extrusion-modal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var actionName = button.data('actionid'); // Extract info from data-* attributes
      var machineID = button.data('tmid'); // Extract info from data-* attributes
      var modal = $(this)
      modal.find('input[name="actionID"]').val(actionName);
      modal.find('input[name="tMID"]').val(machineID);
    })

And the Result on the page:

Long list of names

Using dropdown as @SGS Venkatesh suggested in one of answers

Using Dropdown

Any ideas of how to show list inside modal body?

Answers 1

  • You can try this using Bootstrap's dropdown, and set desirable hight to ul element with overflow-y: scroll or auto.

    <!-- Single button -->
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Operator<span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    

Related Articles