CODEWITHSUNDEEP
cssdrop-down-menucss-position
Dũng Kon
Dũng Kon

Reputation: 69

Absolute drop down content is being hidden

I have jqGrid view, so I added new feature option columns, when clicking in the caret button I will show dropdown list like this if the dropdown content position is fixed but when I scroll down the window I'll be like the picture

enter image description here

When I set child element position to absolute, the content of the drop-down will be hidden

enter image description here

I have searched a lot, but I don't know how to show up the dropdown content with absolute position.

<th id="propsectGrid_Link" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 40px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>
<div id="jqgh_propsectGrid_Link" class="ui-jqgrid-sortable">
    <div id="dropdown-columns" class="dropdown">
        <span class="dt-button btn">
            <span class="caret"></span>
        </span>
        <div id="dropdown-columns-content" class="dropdown-content dt-button-collection" style="position: absolute; margin-right: 35px; display: block;">
            <a id="CustomerId" class="dt-button" onclick="showHideColumn('CustomerId', 'false')">
                <span>CompanyId</span>
            </a><a id="OrgNumber" class="dt-button active" onclick="showHideColumn('OrgNumber', 'true')">
                <span>Org.nr</span>
            </a><a id="Name" class="dt-button active" onclick="showHideColumn('Name', 'true')">
                <span>Company Name</span>
            </a>
        </div>
    </div>
</div></th>

Upvotes: 0

Views: 528

Answers (1)

user2559655
user2559655

Reputation: 11

You need to set the overflow: visible property of the drop down container, which should be jqGrid container.

Upvotes: 1

Related Questions