I am encountering an issue with a dropdown list (created using ul & li) inside a Material Design Lite card. The problem arises from the total height of the options in the list exceeding the height of the div container. This results in the last options of the dropdown menu being hidden from view. Is there a way to make the dropdown list partially extend outside the div based on its height?
Below is the code I have. It includes two locally stored files (a css and a js). Since I couldn't find the direct import URLs, I've provided a link where you can download them: 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>
Appreciate your help!