Estoy tratando de hacer que las opciones desplegables tengan el mismo tamaño que mi botón desplegable, usando el menú desplegable materializado.

Como puede ver a continuación, las opciones desplegables son más anchas que el botón en sí. Incluso con contrainWidth: true . ¿Alguien sabe cómo hacer que sean del mismo tamaño? Gracias.

https://jsfiddle.net/L7hop0fz/103/

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <a class="dropdown-trigger btn-large light-blue lighten-3 black-text" id="chartsBtn" data-target='dropdownCharts'><i class="material-icons center">chevron_right</i></a> <ul id='dropdownCharts' class='.custom2 dropdown-content light-blue lighten-3 black-text'> <li class=""><a href="#!" ><i class="material-icons center">equalizer</i></a></li> <li class=""><a href="#!" ><i class="material-icons center">show_chart</i></a></li> <li class=""><a href="#!"><i class="material-icons center">multiline_chart</i></a></li> </ul>

Javascript inicializar:

 $('.dropdown-trigger').dropdown({ alignment: 'right', hover: true, constrainWidth: true, coverTrigger: false, closeOnClick: false, });