asked on

css\html

Hi Guys,
I have a problem with bootstrapt\dropdown-menu and overflow.
Issue:
I am using the dropdown-menu class inside overflow to return list on one row table and when the list is long it doesn't show all the menu.
I would like to show the full menu even when my overflow comes small.

Here is some link I found with my same problem, but still I couldn't fix it.
https://codepen.io/anon/pen/MEpjQK/

Leonidas Dosas

Do you mean to create a scrollable menu like this?
CSS:

.dropdown-menu{
   height: auto;
    max-height: 100px;
    overflow-x: hidden;
}

Open in new window

Moti Mashiah

ASKER

please can you look at my code and let me know how is it possible to fix it in depend my code:

Thank you.

Here is how my code look like:
html:

HTML:
<div class="grid_wrapper no_padding top_space grid_hide_form" style="visibility: visible; height: auto;">
<table class="tablesorter tablesorter-default hasResizable hasStickyHeaders">
<thead>

</thead>
<tbody>
<tr>
<td>
<div class="dropdown dropup">
<ul class="dropdown-menu grid_drildown">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Open in new window

css:

.grid_wrapper {
            position: relative;
            overflow-y:auto;
            /*width: 100%;*/
        }

Open in new window

jqury:

    $("dropdown-toggle").unbind().click(function () {
        var x = $(this).offset().top;
        var y = $("#test").offset().top;

        var parent = $(this).parent();
        var diglogHeight = parent.find("ul").height() + 50;

        parent.removeClass("dropup");
        if (y - x < diglogHeight) {
            parent.addClass("dropup");
        }
    });

Open in new window

ASKER CERTIFIED SOLUTION

Moti Mashiah

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Moti Mashiah

ASKER

Fixed. solution written in the grid