I am trying to make the dropdown options the same size as my dropdown button, using materializes dropdown menu.

Like you can see below, the dropdown options are wider than the button itself. Even with contrainWidth: true. Does anyone know how to make them be the same size? Thanks.

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 initialize:

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