mardi 21 avril 2015

dropwdown div cut off inside its parent container

I have this html code

<div class="cos_data_table_header_right">
    <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            <i class="fa fa-download"></i>
            <span class="caret"></span>
        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    <button class="btn btn-default"><i class="fa fa-search"></i></button>

and this css for .cosdata_table_header

    padding: 10px;
    background: #cacaca;
    display: block;

The problem is that, the default style of .cosdata_table_header is not wrapping its children yet the dropdown thing is working perfectly but if I set it to overflow: auto, the .cosdata_table_header wraps its children yet if I click the dropdown button, its content has been cut off and a awful scrollbar is shown inside the .cosdata_table_header and if I set the style of .cosdata_table_header to overflow: hidden, the dropdown thing content is not shown (refer below).

enter image description here

any help, suggestions, recommendations, ideas and clues to make this work?

PS: im using bootstrap 3 for the dropdown stuff.

Aucun commentaire:

Enregistrer un commentaire