3

So I'm working on a project using Materialize and for some unknown reasons my Dropdown menues are not appearing correctly. If i have a object with small height the dropdown always hides behind it/ is cut of where the object ends... Example on images:example of the issue and (image had to be removed cuz not enough reputation to post more than 2 images)

I have tried changing z-index and overflow and it doesent seem to work... so any ideas??

EDIT: Applyed what suggested but now it looks like this... enter image description here

Ok so here is the whole 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>

Here is the code for the dropdown menu:

<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: Sorry for bad english :/

2
  • Please show your code Oct 28, 2016 at 7:21
  • which part of code do you need?
    – weinde
    Oct 28, 2016 at 8:56

1 Answer 1

3

The dropdown menu is cut or hidden if it's parent has an overflow:hidden so you can change it to overflow:visible by attaching a css to it.

8
  • ok so I was able to resolve the issue of the second example the way you suggested and apply the solution to the problem from the first example but now i get a scroll bar... i updated the image in the original post...
    – weinde
    Oct 28, 2016 at 8:43
  • you should add the overflow to the dropdown-content so that the scoll in the dropdown becomes visible like this jsfiddle.net/m0sdcn6e/15 Oct 28, 2016 at 8:57
  • Did what you suggested, now i get this... check the image in the post at EDIT:
    – weinde
    Oct 28, 2016 at 9:09
  • If you are getting the same image,then it still means that the overflow scroll hidden is being applied to the dropdown,I might be wrong but i cannot help you without the code Oct 28, 2016 at 12:54
  • where you apply the overflow and all below that,including that div Oct 28, 2016 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.