UL/LI 个下拉菜单,共 div 个
UL/LI dropdown out of div
我在 div(卡片)中使用下拉列表(使用 ul 和 li 创建)时遇到问题,两者都来自 Material Design Lite。我的主要问题是列表的总选项的高度大于 div 高度。这种情况意味着我看不到下拉菜单的最后一个选项。我怎样才能使下拉列表部分(取决于列表的高度)从 div?
中出来
我把我的代码留给你。如您所见,本地有两个文件(一个 css 和一个 js)。我找不到直接导入的url,所以我把url留给大家下载:https://github.com/CreativeIT/getmdl-select
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="C:/Users/n230096/Desktop/Audit Camp/Riesgo de Modelo/IMRTool/Desarrollo/static/getmdl-select-master/getmdl-select.min.css">
<script defer src="C:/Users/n230096/Desktop/Audit Camp/Riesgo de Modelo/IMRTool/Desarrollo/static/getmdl-select-master/getmdl-select.min.js"></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
.mdl-textfield--floating-label.is-focused .mdl-textfield__label{font-size:12px;top:-20px;}
.mdl-textfield__label{color:rgba(0, 0, 0, 1);top:0px;}
</style>
</head>
<body>
<div class="mdl-card mdl-shadow--2dp">
<label for="cars">Choose a number:</label>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select" style="margin-top:20px;padding-top:0px">
<input type="text" value="" class="mdl-textfield__input" id="month_audit_new" style="color:#333333">
<input type="hidden" value="" name="month_audit_new">
<i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
<label for="month_audit_new" id="label_month_audit_new" class="mdl-textfield__label">Date (Month)</label>
<ul for="month_audit_new" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" style="list-style-position: unset;">
<li class="mdl-menu__item">1</li>
<li class="mdl-menu__item">2</li>
<li class="mdl-menu__item">3</li>
<li class="mdl-menu__item">4</li>
<li class="mdl-menu__item">5</li>
<li class="mdl-menu__item">6</li>
<li class="mdl-menu__item">7</li>
<li class="mdl-menu__item">8</li>
</ul>
</div>
</div>
</body>
非常感谢!
在我看来,这与您的卡片对象的属性有某种关系。
你在 CSS 上试过这个吗? :
.card {
overflow: visible;
}
我在 div(卡片)中使用下拉列表(使用 ul 和 li 创建)时遇到问题,两者都来自 Material Design Lite。我的主要问题是列表的总选项的高度大于 div 高度。这种情况意味着我看不到下拉菜单的最后一个选项。我怎样才能使下拉列表部分(取决于列表的高度)从 div?
中出来我把我的代码留给你。如您所见,本地有两个文件(一个 css 和一个 js)。我找不到直接导入的url,所以我把url留给大家下载:https://github.com/CreativeIT/getmdl-select
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="C:/Users/n230096/Desktop/Audit Camp/Riesgo de Modelo/IMRTool/Desarrollo/static/getmdl-select-master/getmdl-select.min.css">
<script defer src="C:/Users/n230096/Desktop/Audit Camp/Riesgo de Modelo/IMRTool/Desarrollo/static/getmdl-select-master/getmdl-select.min.js"></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
.mdl-textfield--floating-label.is-focused .mdl-textfield__label{font-size:12px;top:-20px;}
.mdl-textfield__label{color:rgba(0, 0, 0, 1);top:0px;}
</style>
</head>
<body>
<div class="mdl-card mdl-shadow--2dp">
<label for="cars">Choose a number:</label>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select" style="margin-top:20px;padding-top:0px">
<input type="text" value="" class="mdl-textfield__input" id="month_audit_new" style="color:#333333">
<input type="hidden" value="" name="month_audit_new">
<i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
<label for="month_audit_new" id="label_month_audit_new" class="mdl-textfield__label">Date (Month)</label>
<ul for="month_audit_new" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" style="list-style-position: unset;">
<li class="mdl-menu__item">1</li>
<li class="mdl-menu__item">2</li>
<li class="mdl-menu__item">3</li>
<li class="mdl-menu__item">4</li>
<li class="mdl-menu__item">5</li>
<li class="mdl-menu__item">6</li>
<li class="mdl-menu__item">7</li>
<li class="mdl-menu__item">8</li>
</ul>
</div>
</div>
</body>
非常感谢!
在我看来,这与您的卡片对象的属性有某种关系。
你在 CSS 上试过这个吗? :
.card {
overflow: visible;
}