在卡中实现 Css : select
Materialize Css : select in card
我正在尝试在卡片中使用 select。
问题是当 select 列表打开时它应该溢出卡外，但它没有。
溢出的部分是hidden/blocked/gone。
我试过以下但失败了：
- 溢出：可见
- 增加 z-index
- 将位置更改为相对位置（这会动态增加卡片以适应 select - 不是想要的结果）
附带的问题，在卡片中使用 select（或其他输入）不是一个合适的 material 设计吗？
这是因为 .card class 上有样式 overflow: hidden。如果您将其从您的卡中删除，它将允许 select 的内容流出其边界。
将 overflow: visible 添加到 .card 有效。这是 codepen。只要确保您正确覆盖 .card class 样式即可。
您必须手动初始化 select
像 :
$(document).ready(function(){
$('select').formSelect();
});
或者
M.AutoInit();
如果您不想在所有页面上手动初始化，只需在您的脚本标签中添加一行即可。
按照他们的文档进行操作 https://materializecss.com/select.html 导航到初始化部分
我正在尝试在卡片中使用 select。
问题是当 select 列表打开时它应该溢出卡外，但它没有。
溢出的部分是hidden/blocked/gone。
我试过以下但失败了：
- 溢出：可见
- 增加 z-index
- 将位置更改为相对位置（这会动态增加卡片以适应 select - 不是想要的结果）
附带的问题，在卡片中使用 select（或其他输入）不是一个合适的 material 设计吗？
这是因为 .card class 上有样式 overflow: hidden。如果您将其从您的卡中删除，它将允许 select 的内容流出其边界。
将 overflow: visible 添加到 .card 有效。这是 codepen。只要确保您正确覆盖 .card class 样式即可。
您必须手动初始化 select 像 :
$(document).ready(function(){
$('select').formSelect();
});
或者
M.AutoInit();
如果您不想在所有页面上手动初始化，只需在您的脚本标签中添加一行即可。
按照他们的文档进行操作 https://materializecss.com/select.html 导航到初始化部分