代码之家 › 专栏 › 技术社区 › ichbinblau

如何使下拉列表覆盖外部卡?

material-design-lite css jquery

ichbinblau · 技术社区 · 9 年前

z-index 更大的值,但不起作用。

这是我的 jsfiddle code .

3 回复 | 直到 9 年前

Minal Chauhan Adriano 9 年前

它不显示在卡片外面,因为它是父母的 overflow:hidden 所有物

因此,您需要为此添加css:

.mdl-card {
      overflow: visible !important;
}

.status-card {
  min-height: 15% !important;
  display: block !important;
}
.mdl-card {
  overflow: visible !important;
}

.status-card > .mdl-card__supporting-text {
  margin-bottom:0px !important;
}

.status-card > .mdl-card__supporting-text > .mdl-cell--10-col {
  padding: 8% 0 8% 2%;
}

.status-card span,
color: black;
}

.status-card li:before,
content: 'â ';
padding-right: 0.5em;
font-size: 170%; /* or whatever */
}

.status-card ul,
max-height: 140px;
overflow-y: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.css" rel="stylesheet"/>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.3/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.js"></script>

<div class="status-card mdl-card mdl-cell mdl-shadow--2dp mdl-cell--3-col">                  
  <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing" style="margin-left: 4%;">                        
    <button id="test1" class="mdl-button mdl-js-button mdl-button--raised" style="margin-top: 8%"></button>
    <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events" for="test1">
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>xyz</span></li>
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>yue</span></li>
      <li class="mdl-menu__item" style="color: #cd8daa;"><span>24</span></li>
    </ul>                       
    <div class="mdl-cell mdl-cell--6-col" style="display: flex; flex-flow: row wrap;">
      <h6 title="">TEST</h6>                            
    </div>                                     
  </div>
</div>

Huy Nguyen 9 年前

下拉列表不会覆盖卡,因为“.mdl卡”具有“溢出:隐藏”。您可以使用值“溢出:继承”或“溢出:可见”覆盖“.mdl卡”

ab29007 9 年前

添加溢出

.status-card {
    min-height: 15% !important;
    display: block !important;
    overflow:visible;
}

给这个id=“状态卡-1”

#status-card-1{
  z-index:20;
}

这是 fiddle

推荐文章

Dada Bellmon · 更改mdl布局标题mdl布局标题行的高度

8 年前

tealowpillow · 引导4切换的水平对齐失败

9 年前

ichbinblau · 如何使下拉列表覆盖外部卡?

9 年前

Daniel Rivas · 在flex容器中使用时,材料设计Lite粘性小页脚被截断

9 年前

Kijek · React和Webpack材质设计精简版

10 年前

Tan Jia Ming · Material Design Lite的动画演示在哪里?[已关闭]

10 年前

hr_117 · 动态网站上的MDL降级

10 年前

Paul S Chapman · Google MDL Waterfall标题在滚动条和正文右侧的滚动条上不收缩

10 年前

nickc · 以前隐藏的div上的material design lite文本框

10 年前

Robin Ostwald · 如果稍后添加元素,则mdl js文本字段不起作用

10 年前