Question

所以我正在使用Materialize进行一个项目，由于一些不明原因我的Dropdown菜单没有正确显示。如果我有一个高度较小的物体，那么下拉物总是隐藏在物体后面/切割物体结束的地方...... 图片示例：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，则下拉菜单会被剪切或隐藏，因此您可以通过附加css将其更改为overflow:visible。

Materialise下拉列表支持其他元素，因为oferflow和z-index doesent适用

1 个答案: