Google Material Design 카드 안에 드롭 다운 목록이 있습니다. 버튼을 클릭하면 드롭 다운 목록이 카드 위에 표시되지 않습니다. z-index
더 큰 값 으로 설정하려고했지만 작동하지 않았습니다.
다음은 내 jsfiddle 코드 입니다.
부모가 overflow:hidden
속성을 가지고 있기 때문에 카드 외부에 표시되지 않습니다 .
따라서 CSS를 추가해야합니다.
.mdl-card {
overflow: visible !important;
}
.status-card {
min-height: 15% !important;
display: block !important;
}
.mdl-card {
overflow: visible !important;
}
.status-card > .mdl-card__supporting-text {
margin-bottom:0px !important;
}
.status-card > .mdl-card__supporting-text > .mdl-cell--10-col {
padding: 8% 0 8% 2%;
}
.status-card span,
color: black;
}
.status-card li:before,
content: '■';
padding-right: 0.5em;
font-size: 170%; /* or whatever */
}
.status-card ul,
max-height: 140px;
overflow-y: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.css" rel="stylesheet"/>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.3/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.js"></script>
<div class="status-card mdl-card mdl-cell mdl-shadow--2dp mdl-cell--3-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing" style="margin-left: 4%;">
<button id="test1" class="mdl-button mdl-js-button mdl-button--raised" style="margin-top: 8%"></button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events" for="test1">
<li class="mdl-menu__item" style="color: #cd8daa;"><span>xyz</span></li>
<li class="mdl-menu__item" style="color: #cd8daa;"><span>yue</span></li>
<li class="mdl-menu__item" style="color: #cd8daa;"><span>24</span></li>
</ul>
<div class="mdl-cell mdl-cell--6-col" style="display: flex; flex-flow: row wrap;">
<h6 title="">TEST</h6>
</div>
</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다