Bootstrap 4 drop-down menu in table

Question

I have some trouble with a drop-down menu (Bootstrap 4). So I have a table:

When I'm clicking on settings in first row I have a drop-down:

But when I'm clicking on settings in second row, I have a drop-down in same place as the first. How I can solve it?

Here is a codepen same troubles there: CodePen

HTML:

<div class="table-responsive">
        <table class="table table-hover table-sm">
            <thead>
                <tr>
                    <th>Фио сотрудника</th>
                    <th>Должность</th>
                    <th>Телефон</th>
                    <th>Ломбард</th>
                    <th>Профиль доступа</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="tflex">
                        <span class="default-av">hC</span>
                        <span>Тарнавский Дмитрий Алексеевич</span>
                    </td>
                    <td>Разработчик</td>
                    <td>+7 (921) 030-33-32</td>
                    <td>Южный</td>
                    <td>Администратор</td>
                    <td align="center">
                        <div class="dropdown">
                            <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="far fa-cog"></i>
                            </a>    
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Разработчик</td>
                    <td>Moe</td>
                    <td>+7 (921) 030-33-32</td>
                    <td>Dooley</td>
                    <td>+7 (921) 030-33-32</td>
                    <td align="center">
                        <div class="dropdown">
                            <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="far fa-cog"></i>
                            </a>    
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action2</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

Use Unique *Ids* for both the dropdowns – Liaqat Saeed Mar 18 '18 at 10:20 — Liaqat Saeed, Mar 18 '18 at 10:20
I tried on the Codepen Snippet and its working for me – Liaqat Saeed Mar 18 '18 at 10:22 — Liaqat Saeed, Mar 18 '18 at 10:22
we are talking about this: id right? – WhoIsDT Mar 18 '18 at 10:25 — WhoIsDT, Mar 18 '18 at 10:25

Carol Skelly · Accepted Answer · 2018-03-18T11:53:00.760

6

As stated in the Bootstrap docs...

Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

It's happening because the table-responsive doesn't have enough vertical height. Give the table-responsive a min height, for example...

.vh-100 {
    min-height: 100vh;
}

https://codepen.io/anon/pen/VXmLqG?editors=1100

edited Mar 18 '18 at 11:53

answered Mar 18 '18 at 11:46

Carol Skelly

351,302
90
710
624

Your codepen have some troubles.. i cant see it, it's always reload page.. So we detected, that main problem in responsive table. ok. I just tried to remove class table-resposive. Now i have troubles, that my ddmenu shows far away from right side of screen. also, when i reload page i need to click twice on element to open ddmenu.. How i can solve it? And second problem that i need to open/close ddmenu about 20 times, after what my ddmenu will shows on normal position... What it can be? – WhoIsDT Mar 19 '18 at 11:46
Same problem on my codepen: https://codepen.io/WhoIsDT/pen/RMoNEL. you can see it. i removed responsive talbe class and now i need to open/close few times, and by one time ddmenu moving from right to left for a few px. How to solve this bug? – WhoIsDT Mar 19 '18 at 11:48

score 6 · Answer 2 · edited Jan 02 '21 at 20:05

data-toggle="dropdown" data-boundary="window"

The code above did the trick for me!

Here is my complete dropdown in table cell code:

<div class="btn-group d-md-none m-1">
  <button class="btn btn-primary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    data-boundary="window"
    aria-haspopup="true"
    aria-expanded="false">
    <span>Actions</span>
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Dropdown item</a>
  </div>
</div>
</td>

score 2 · Answer 3 · answered Jan 14 '19 at 16:28

2

Define this properties for Bootstrap 4. Good Luck!

data-toggle="dropdown" data-boundary="window"

answered Jan 14 '19 at 16:28

Halit Yeşil

181
1
3

3

Be specific of where to add this please. Does it go on the anchor tag or the actual dropdown DIV? – TheRealChx101 Apr 12 '20 at 07:31

Liaqat Saeed · Answer 4 · 2018-03-19T07:56:16.270

Here is the Working fiddle

<div class="table-responsive">
    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <th>Фио сотрудника</th>
                <th>Должность</th>
                <th>Телефон</th>
                <th>Ломбард</th>
                <th>Профиль доступа</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="tflex">
                    <span class="default-av">hC</span>
                    <span>Тарнавский Дмитрий Алексеевич</span>
                </td>
                <td>Разработчик</td>
                <td>+7 (921) 030-33-32</td>
                <td>Южный</td>
                <td>Администратор</td>
                <td align="center">
                    <div class="dropdown">
                        <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="far fa-cog"></i>
                        </a>    
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Разработчик</td>
                <td>Moe</td>
                <td>+7 (921) 030-33-32</td>
                <td>Dooley</td>
                <td>+7 (921) 030-33-32</td>
                <td align="center">
                    <div class="dropdown">
                        <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="far fa-cog"></i>
                        </a>    
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action2</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                </td>
            </tr>
                    <tr>
                <td>Разработчик</td>
                <td>Moe</td>
                <td>+7 (921) 030-33-32</td>
                <td>Dooley</td>
                <td>+7 (921) 030-33-32</td>
                <td align="center">
                    <div class="dropdown">
                        <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="far fa-cog"></i>
                        </a>    
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action2</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                </td>
            </tr>
                    <tr>
                <td>Разработчик</td>
                <td>Moe</td>
                <td>+7 (921) 030-33-32</td>
                <td>Dooley</td>
                <td>+7 (921) 030-33-32</td>
                <td align="center">
                    <div class="dropdown">
                        <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="far fa-cog"></i>
                        </a>    
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action2</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Разработчик</td>
                <td>Moe</td>
                <td>+7 (921) 030-33-32</td>
                <td>Dooley</td>
                <td>+7 (921) 030-33-32</td>
                <td align="center">
                    <div class="dropdown">
                        <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="far fa-cog"></i>
                        </a>    
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action2</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Working Fiddle

maybe i'm something missing? even on codepen when i'm changing id's nothing happen... — WhoIsDT, Mar 18 '18 at 10:38
you can identify corrections. i guess your question is answered in this fiddle — Liaqat Saeed, Mar 20 '18 at 11:35

Bootstrap 4 drop-down menu in table

4 Answers4

Linked