<style>
    #note-type-dropdown {
        position: relative;
        font-size: large;
        padding: 20px;
        width: 100%;
        margin-top: 15px;
        max-height: 80vh;
        overflow: auto;
    }
</style>

<div id="note-type-chooser-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="max-width: 500px;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mr-auto">Choose note type</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Choose note type / template of the new note:

                <div class="dropdown">
                    <button id="note-type-dropdown-trigger" type="button" style="display: none;" data-toggle="dropdown">Dropdown trigger</button>

                    <div id="note-type-dropdown" class="dropdown-menu"></div>
                </div>
            </div>
        </div>
    </div>
</div>
