CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsassbootstrap-4
WhoIsDT
WhoIsDT

Reputation: 705

Bootstrap 4 drop-down menu in table

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

enter image description here

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

enter image description here

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?

enter image description here

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>

Upvotes: 1

Views: 31874

Answers (4)

Robert van Lienden
Robert van Lienden

Reputation: 61

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>

Upvotes: 6

Halit Yeşil
Halit Yeşil

Reputation: 201

Define this properties for Bootstrap 4. Good Luck!

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

Upvotes: 2

Liaqat Saeed
Liaqat Saeed

Reputation: 428

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

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 6

Related Questions