html - Materialize 下拉列表落后于其他元素溢出且 z-index 不适用

Question

所以我正在使用 Materialize 开发一个元素，但由于某些未知原因，我的下拉菜单显示不正确。如果我有一个高度较小的物体，下拉列表总是隐藏在它后面/被切割物体结束的地方...... 图片示例:example of the issue并且(必须删除图片，因为没有足够的声誉来发布超过 2 张图片)

我已经尝试过更改 z-index 和溢出，但它似乎没有用...那么有什么想法吗？？

编辑:应用了建议但现在看起来像这样...

好的，这是整个 div:

        <div class="columns" style="overflow-y: visible;">
        {{#if middle}}
            {{#if board.f_enabled_lanes}}


                     <div class="laneSortable">

                     {{#each lane in boardCardsLanesArray}}
                     <div class="lanes" value="{{lane._id.valueOf}}">
                            <div style="text-align:center; background-color: #e0e0e0;" class="lane_header lane_sort">

                                {{#each cardDataLane in boardCardsDataArray2 lane.lkp_card_data_fkeyi_ref}}
                                  <!--<b>{{cardDataLane.txt_name}}</b>-->
                                   {{> Cards_view board=board cardData=cardDataLane boardName=board.txt_name boardId=board._id parentCard=card._id pcOrder=card.lng_order leneCard=true}}
                                {{/each}}

                            </div>
                            <div class=" columnSortable">
                            {{#let laneIndex=@index}}
                                {{#each column in columnArray}}
                                    {{> Columns_view rowIndex=laneIndex column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name lane=lane.lkp_card_data_fkeyi_ref canEdit=canEdit}}
                                {{else}}
                                    <!-- {{> Columns_view column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name}}--><!-- else briši Dnd test -->
                                {{/each}}
                            {{/let}}
                            </div>
                     </div>
                     {{/each}}

                     </div>

            {{else}}
                <div class=" columnSortable">
                {{#each column in columnArray}}
                    {{> Columns_view rowIndex=@index column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name canEdit=canEdit}}
                {{else}}
                    <!-- {{> Columns_view column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name}}--><!-- else briši Dnd test -->
                {{/each}}
                </div>

            {{/if}}
            <!-- {{> Columns_add_new boardId=board._id workspaceId=workspaceId}}-->
        {{else}}

            <div class="column column_style_boards_view" style="">
                <div class="boardBar flex board_sort" style="background-color: transparent;">
                    <div class="boardNameBacklog" value="{{board.txt_name}}" boardType="1"><h6 style="font-size:16px;"><i
                            class="material-icons icon icon-black" style="line-height: 18px;">view_list</i>{{board.txt_name}}
                        <!--{{board.type}}--></h6></div>
                    <div class="boardOption">
                        <a class='dropdown-button-board' href='#' data-activates='boardOptions{{board._id.valueOf}}'><i
                                class="material-icons icon-black">more_vert</i></a>
                    </div>

                </div>
            <div class="cardSortable">
                {{#each card in boardCardsArray}}
                    <!--{{card._id.valueOf}} -nadrejene kartice-->
                    {{#each cardData in boardCardsDataArray2 card.lkp_card_data_fkeyi_ref}}

                        {{> Cards_view board=board cardData=cardData boardName=board.txt_name boardId=board._id parentCard=card._id pcOrder=card.lng_order canEdit=canEdit}}<!--  todo ne cela kartica mapak najprej card samo id in potem znotraj carddata -->

                    {{/each}}
                {{/each}}

                <!--drugače smo v backglogu in dodajmo kartice na boarde-->
                <!-- {{> Cards_add_new columnId=null workspaceId=workspaceId boardId=board._id}}-->
                {{#if canEdit}}
                <a href="" id="openModalNewCard_BL" class="new_Card_style_board_view addCardBL-js" modalName="newCard"> Add card ...</a>
                {{/if}}
            </div>
            </div>
        {{/if}}

        {{#if board.f_enabled_lanes}}
            {{#if canEdit}}
                <div><!--{{> Cards_add_new columnId=null workspaceId=workspaceId boardId=board._id f_lane=true}}-->
                    <a href="" id="openModalNewCard_BL" modalName="newCard"> Add lane ...</a>
                </div><!-- dodajanje lanes je isto kot kartica z f_lane parametrom  -->
            {{/if}}
        {{/if}}
    </div>

这是下拉菜单的代码:

<div id='columnOptions{{column._id.valueOf}}-{{rowIndex}}' class='dropdown-content' style="list-style-type: none;">
    {{#if canEdit}}
    <li><a href="">Subscribe</a></li>
    <li class="divider"></li>
    <li><a href="" id="openModalRenameColumn" modalName="renameColumnModal-{{column._id.valueOf}}">Rename</a></li>
    <li><a href="" id="deleteColumn">Delete</a></li>
    {{/if}}
</div>

P.S:抱歉英语不好:/

Answer 1

如果下拉菜单的父项具有 overflow:hidden，则下拉菜单将被剪切或隐藏所以你可以把它改成overflow:visible通过附加一个 css 到它。