0

I had issues using bootstrap dropdowns in <table>, it was cut and behaved weirdly. I've found a way to move the dropdown menu out of the table with this example, but I'm not sure how to handle multiple dropdowns, as it is used per each table row:

<table>
    @foreach(...){
    <tr>
        <td>
            <div class="dropdown">
               <button data-bs-toggle="dropdown" data-bs-auto-close="true" data-bs-offset="0,2" aria-expanded="false">See review</button>
               <div class="dropdown-menu" role="menu">/*some menu items*/</div>
            </div>
        </td>
    </tr> 
  }
</table>

Here is the JS:

var dropdownMenu:any;   
    $('.dropdown').on('show.bs.dropdown', function (e:any) {        
        dropdownMenu = $(this).find('.dropdown-menu');
        $('body').append(dropdownMenu.detach());
        dropdownMenu.css('display', 'block');
        dropdownMenu.position({
            'my': 'right top',
            'at': 'right bottom',
            'of': $(e.relatedTarget)
        });     
    });

    $(".dropdown").on('hide.bs.dropdown', function (e: any) {
        if (dropdownMenu != undefined) {
            $(e.currentTarget).append(dropdownMenu.detach());
            dropdownMenu.hide();
        }
    });

It works fine if you open each dropdown and click outside, but if you open one dropdown and then click on another right after (like click See review in one row and then click See review in another row right after), it closes all the dropdowns and the previously opened one's DOM remains in body.

Gyuzal
  • 1,581
  • 10
  • 52
  • 99
  • 1
    Can you replicate your issue? Because a table with dropdowns works out of the box in [this JSFiddle](https://jsfiddle.net/6oL2sxb3/) I created. Your issue seems to be in the script, but if it works without it.... Also, not all that relevant but `data-bs-auto-close="true" data-bs-offset="0,2"` are the default values and thus no need to define them. – Cooleronie Jan 06 '23 at 14:58
  • I found the problem, it was the css animation using opacity, here's the [JSFiddle](https://jsfiddle.net/7ac2r0q6/). The problem is in animation-name, do you have any idea why it causes z-index problem? – Gyuzal Jan 09 '23 at 05:14
  • Anyways, i'd like to know if there's a way to use the method above with multiple dropdowns, as this could be useful in case you don't want your table to grow when the dropdown is open and there're less rows, like 1 or 2, and the ddwn menu is huge – Gyuzal Jan 09 '23 at 05:17
  • 1
    To fix z-index: target the table body `tbody` for the opacity animation, not the table row. So `.table tbody { ... }`. I'm not sure I understand your second question. Bootstrap dropdowns are positioned absolute, the only reason the table 'grows' is because its making the dropdown a block element instead. So please explain what you mean exactly? Also, using jQuery UI to position an element (unless you use the widgets elsewhere) is like needing a radio and buying a car to get it. I won't ask about the Typescript. – Cooleronie Jan 09 '23 at 18:09
  • i tried to use the animation with `tbody` instead, but i don't think it works cause I see it's not applied when I paginate the table. To the second question - I'm basically trying to achieve the bootstrap popover functionality with the dropdown. So when the dropdown menu is open, no other UI is affected, it'd just appear on top of everything. Also I can't use the popover itself cause it's buggy when it has clickable elements (they can't be clicked on certain devices) – Gyuzal Jan 09 '23 at 19:45
  • 1st: I need to know how you paginate the table for me to help with the animation; best is making a new question. 2nd: popovers and dropdowns are positioned the exact same way; absolutely. Any absolute positioned element is taken out of the flow of the document and doesn't affect any other element; so your question is not making any sense to me. Dropdowns also have `z-index: 1000`. If the dropdown is still hidden behind another element, set that element to `position: relative` with `z-index: -1`. For further help; please add images to show how you want things to behave or create a chat w/ me. – Cooleronie Jan 10 '23 at 13:05
  • 2nd: there is a difference when the dropdown is located in a scrollable container, then the menu would be positioned absolutely to that container, so inside the scrollable area, which is not the case when using a popover. Anyway, thanks for help, I fixed the dropdown issue in a table instead of searching for a workaround – Gyuzal Jan 11 '23 at 05:50
  • 1st: my app is a .NET Blazor app, for tables and pagination I use 3rd party UI components - Blazorise DataGrid and Pagination, here is the [demo](https://bootstrap5demo.blazorise.com/tests/datagrid/pager) – Gyuzal Jan 11 '23 at 09:37

0 Answers0