UL/LI dropdown out of div
Question
I have a problem using a dropdown list (created with ul & li) inside a div (card), both from Material Design Lite. My main problem is that the height of the total options of the list is greater than the div height. This situation means that I can not see the last options of the dropdown menu. How can I do that the dropdown list partially (depending on the height of the list) come out of the div?
I leave you here my code. As you can see, there are two files (a css and a js) that are locally located. I can not found the url to imported directly, so I leave you the url where you can download: 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>
Many thanks!
1 answers
solution1
1 ACCPTED 2020-07-23 17:14:39
In my opinion is somehow related to the properties of your card object.
Have you tried this on your CSS? :
.card {
overflow: visible;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.