Modal height not increasing

Question

I have a modal as given here below:

The modal has to be large enough to have the first text field and check button beside each other, and the second text field and check button beside each other. I tried to increase the height and width of the modal, but succeeded in increasing only the width. The height is becoming smaller, when trying to customise the modal size. Using modal-lg had the same effect. My code is given below:

<div id="addQueue" class="modal fade" role="dialog">
    <div class="modal-dialog addqueue-modal">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add a Queue to your Desk</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <div class="col-sm-7">
                            <label for="queuename">Name your Queue: </label>
                            <input type="text" class="form-control" id="queuename">
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" value="closedqueue">Create a Closed Queue; Open when ready</label>
                        </div>

                        </div>
                        <div class="form-group">
                            <div class="col-md-7">
                                <label for="queueinfo">Additional information about the Queue: </label>
                                <input type="text" class="form-control" id="queueinfo">
                            </div>
                            <span class="checkbox">
                                <label><input type="checkbox" value="tooltipdisplay">Display as tooltip when hovering over the Queue</label>
                            </span>
                        </div>
                        <hr>
                </form>
            </div>
        </div>
    </div>
</div>

The relevant CSS is given below:

.addqueue-modal{

    width: 1000px;
    max-height: 1000px;
}

Does anyone know how I can fix my modal to have my text fields and checkboxes in the same lines as described earlier? Thanks in advance!

Answer 1

Try this

.addqueue-modal{
    width: 1000px;
    max-height: 1000px;
    overflow-y: auto;
}