如何使具体化下拉选项与下拉按钮的大小相同

Question

我正在尝试使用具体化下拉菜单使下拉选项与我的下拉按钮大小相同。

如下图所示，下拉选项比按钮本身更宽。即使 contrainWidth: true。有谁知道如何使它们大小相同？谢谢。

<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初始化：

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

Answer 1

在 .dropdown-content 上的样式中，min-widtht: 100px 已经设置，这就是您的问题的原因。设置 min-width: unset 来修复它。
为了解决箭头问题，您可以将代码放入容器中。

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

#dropdownCharts a{
    color: black;
}

#container:hover #chartsBtn .material-icons {
    transform: rotate(+90deg);
}


#dropdownCharts li{
    width: auto;
}

ul.dropdown-content{
    min-width: unset;
}

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

  <span id="container">
  <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>
  </span>

如何使具体化下拉选项与下拉按钮的大小相同

How can I make materalize dropdown options the same size as the dropdown button

javascript

css

materialize