MDL卡片高度定制

Question

所以我想让一张卡片的显示方式与它在 Material design spec

中的显示方式相同

我已经设法在一个简单的红色方块上使用 jquery 来做到这一点（参见第一个片段）我只是给所需的元素 0 高度和宽度，然后使用 [=37= 为高度和宽度设置动画] 到我想要的大小。

任何 MDL 卡的问题是，我无法将高度设置为小于 200 的值。您可以查看我的第二个片段，看看当我尝试将其设置为 150px 时会发生什么。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Card</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
     <p id="Box"></p>
        <button id="Start">Start</button>
        <button id="Reset">Reset</button>
        <script>
        $(document).ready(function() {
            
            $("#Start").click(function(){
                $('#Box').animate({height: "150px", width: "150px"},{duration: 1000});
            });

             $("#Reset").click(function(){
                $('#Box').animate({height: "0px", width: "0px"},{duration: 1000});
            });
            
        });
        </script>
        <style>
        #Box{
         width: 0px;
         height: 0px;
         background-color: red;
            box-shadow: -3px 1px 30px 0px rgba(50,50,50,0.25);
        }
        </style>
    </body>
</html>

$(document).ready(function(){
            
 $('.mdl-card').animate({height: "150px", width: "0px"},{duration: 1000});  
  $("#Start").click(function(){
    $('.mdl-card').animate({height: "150px", width: "150px"},{duration: 1000});
  });

  $("#Reset").click(function(){
    $('.mdl-card').animate({height: "0px", width: "0px"},{duration: 1000});
  });            
               
               
});

<!doctype html>
<html>
    <head>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
       <div class="mdl-card mdl-shadow--6dp"></div>
        <button id="Start">Start</button>
        <button id="Reset">Reset</button>
    </body>
   <style>
  .mdl-card{
  margin: 5px 5px;
  width: 0px;
  height: 0px;
}</style>
</html>

任何帮助将不胜感激，也许 jquery 有不同的方法来做到这一点？

Answer 1

在测试了您的代码片段并查看了 Chrome 开发者控制台发生的一切后，我发现 .mdl-card 在 css 中有一个 min-height 属性。将该值覆盖为 0 为我修复了它。

MDL卡片高度定制

MDL card height customization

javascript

jquery

material-design-lite