bootstrap modal overflow issue

Question

I have a Bootstrap modal with a button. When I click the button it shows a right under the button. The contains a ul list with anchor links in it.

The problem is that if I don't set the height to a higher value then that inside the modal the last items is not visislbe because the div is outside the modal.

I don't want to use overflow because i don't want it to scroll. The inside the modal is a dropdown menu which i made my self.

The CSS for the :

.wrapper-for-dropdown {
width: 300px;
z-index:9999;
color: #333;
background-color: #fff;
position: absolute;
display: none;
border: solid;
border-width: 1px;
border-radius: 4px;
border-color: #ccc;
z-index:32432423432;
overflow-wrap:normal;
 }

.wrapper-for-dropdown:hover {
    border: solid;
    border-width: 1px;
    border-color: #ccc;
}
.dropdown-ul {
list-style-type: none;
-moz-st color: white;
text-align: left;
padding-left: 10px;
overflow-y: visible;
}
.dropdown-ul li {
float: left;
display: inline-block;
height: auto;
width: 250px;

}
.dropdown-ul li:hover {
}
.dropdown-ul li a {
    color: #38546d;
    display: block;
    float: left;
}

.dropdown-ul li a:hover {
        color: black;
        display: block;
        float: left;
    }

HTML: 

 <!-- Modal -->
            <div class="modal" id="modalCreateNewManualResync" tabindex="-1" role="dialog" aria-labelledby="modalCreateNewManualResyncLabel" aria-hidden="true">
                <div class="modal-dialog" id="createNewSyncDialog">
                    <div class="modal-content" style="">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="modalCreateNewManualResyncLabel">Create New Resync
                            </h4>
                        </div>

                        <!-- Model Body -->
                        <div class="modal-body" >
                            <div class="container-fluid">
                                <div class="modal-content-div">
                                    <label>Company:</label>
                                    <label>Sync Reason:</label>
                                </div>
                                <div class="modal-content-div-data">
                                    <button class="btn btn-default" id="buttonCompaniesList" onclick="listCompaniesToogle();" type="button" style="display: inline-block; width: 180px;">Select Company<span id="spanArrowIndicator" style="margin-left: 10px; margin-right: 10px;" class="caret"></span></button>
                                    <div id="wraptest" class="wrapper-for-dropdown">
                                        <ul id="ulcompanies" class="dropdown-ul">

                                        </ul>
                                    </div>
                                    <input type="text" />
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close<span style="margin-left: 10px;" class="glyphicon glyphicon-remove"></span></button>
                                    <button type="button" class="btn btn-default">Create<span style="margin-left: 10px;" class="glyphicon glyphicon-ok"></span></button>
                                </div>
                            </div>
                        </div>
                        <!--End Of Modal Body -->
                    </div>
                </div>

![Current example of the GUI. Italy and International is not clickable.][1]

[1]Italy and International is not clickable: https://i.stack.imgur.com/uVcLj.jpg

You'll probably what to put `overflow: hidden` on an ancestor element to force it to contain the list. It's hard to say without a demo. http://liveweave.com — isherwood, Apr 16 '15 at 20:57
possible duplicate of [Bootstrap drop down cutting off](http://stackoverflow.com/questions/14473769/bootstrap-drop-down-cutting-off) — isherwood, Apr 16 '15 at 20:58
possible duplicate of [Bootstrap: In a modal dialog, how do I make the dropdown menu expand outside the dialog?](http://stackoverflow.com/questions/11899870/bootstrap-in-a-modal-dialog-how-do-i-make-the-dropdown-menu-expand-outside-the) — Aguardientico, Apr 16 '15 at 21:00
Maybe you can use in your styles: `.modal {overflow: visible}` and `.modal-body {overflow-y: visible}` — Aguardientico, Apr 16 '15 at 21:00
The height of the div (drop down ) is set to auto. Setting overflow style on the modal and modal body only gives me a scroll content. I don't want that. I want a drop down that expands over the modal dialog which is does bit the anchors can't be clicked. — user3514987, Apr 16 '15 at 21:04

score 1 · Answer 1 · answered Apr 16 '15 at 21:17

1

Adding

.modal {overflow: visible}

Solved the issue. Do not add anything else to .model-body.

Also removing some other style on my own div solved the issue. Setting the height to auto as well.

Thanks.

answered Apr 16 '15 at 21:17

user3514987

210
3
9

bootstrap modal overflow issue

1 Answers1