Question

在我的网站上使用Materialize时，我遇到了一个非常烦人的问题-整个html标签的高度似乎由于某种原因而固定了，这引起了问题，例如页面的基本元素没有出现在底部，因为它们是从内容中删除的。但是，对于F12，该元素仍然存在，就在html的视口之外。

此问题已在此处重现，并使用最新的Google Chrome浏览器进行了测试：

.input-field label {
  color: #000;
}

/* label focus color */
.input-field input[type=email]:focus+label {
  color: #33691e !important;
}

/* label underline focus color */
.input-field input[type=email]:focus {
  border-bottom: 1px solid #33691e !important;
  box-shadow: 0 1px 0 0 #64dd17 !important;
}

/* valid color */
.input-field input[type=email].valid {
  border-bottom: 1px solid #64dd17;
  box-shadow: 0 1px 0 0 #000;
}

/* invalid color */
.input-field input[type=email].invalid {
  border-bottom: 1px solid red;
  box-shadow: 0 1px 0 0 #000;
}

/* icon prefix focus color */
.input-field .prefix.active {
  color: #000;
}

.input-field input[type=password]:focus+label {
  color: #33691e !important;
}

/* label underline focus color */
.input-field input[type=password]:focus {
  border-bottom: 1px solid #33691e !important;
  box-shadow: 0 1px 0 0 #64dd17 !important;
}

.input-field input[type=text]:focus+label {
  color: #33691e !important;
}

/* label underline focus color */
.input-field input[type=text]:focus {
  border-bottom: 1px solid #33691e !important;
  box-shadow: 0 1px 0 0 #64dd17 !important;
}

/* valid color */
.input-field input[type=text].valid {
  border-bottom: 1px solid #64dd17;
  box-shadow: 0 1px 0 0 #000;
}

/* invalid color */
.input-field input[type=text].invalid {
  border-bottom: 1px solid red;
  box-shadow: 0 1px 0 0 #000;
}

.tabs .tab a {
  color: #33691e !important;
}

/*Black color to the text*/

.tabs .tab a:hover {
  background-color: #f1f8e9 !important;
  color: #33691e !important;
}

/*Text color on hover*/

.tabs .tab a.active {
  background-color: #dcedc8 !important;
  color: #33691e !important;
}

/*Background and text color when a tab is active*/

.tabs .indicator {
  background-color: #33691e !important;
}

/*Color of underline*/

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="ISO-8859-1">
    <title>Test</title>
    <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">
  </head>

  <body>
    <div class='container'>
      <div class='row'>
        <div style='text-align: center; height: 100px;'>
          <img src='/cocamar/imagens/Transcocamar_horizontal.png' style='width: 60%;margin: 0 auto; margin-top:-5%;' alt='This is a header image'>
        </div>
      </div>
      <div class='row' style='margin-top:-20px;'>
        <small style='float: right;'>
          <b>Motorista: Fulano</b><br>
          <b>Placa: AAA-1234</b>
        </small>
        <h4>Cargas</h4>
      </div>
      <div style='margin-top: -20px;'>
        <div class='col s12'>
          <ul class='tabs' id='tabs1'>
            <li class='tab col s4'><a href='#atual' class='active'>Atual</a></li>
            <li class='tab col s4'><a href='#disponiveis'>Disponíveis</a></li>
            <li class='tab col s4'><a href='#historico'>Histórico</a></li>
          </ul>
        </div>
        <div id="atual" class="col s12">
          <div class='container'>
            <div class='card'>
              <div class='container'>
                <p><b>Carga</b></p>
                <p><b>Status</b></p>
                <p><b>Peso</b></p>
                <p><b>Valor</b></p>
                <p><b>Entregas</b></p>
                <p><b>Municípios</b></p>
              </div>
            </div>
            <div class='row'>
              <button type='button' class='col s12 btn waves-effect'>Enviar Local</button>
            </div>
            <div class='row'>
              <button type='button' class='col s12 btn waves-effect'>Digitar canhoto</button>
            </div>
            <div class='row'>
              <button type='button' class='col s6 btn waves-effect'>Detalhar</button>
            </div>
            <div class='row'>
              <button type='button' class='col s6 btn waves-effect'>Ver Mapa</button>
            </div>
          </div>
        </div>
        <div id="disponiveis" class="col s12">
          <h2>Disponiveis</h2>
        </div>
        <div id="historico" class="col s12">
          <h2>Historico</h2>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
      var tabElems1 = document.querySelector("#tabs1");
      var tabInstances1 = M.Tabs.init(tabElems1, {
        swipeable: true
      });

    </script>
  </body>

</html>

要么 https://jsfiddle.net/ptqgdf8x/

如您所见，最后一个按钮（“ Ver mapa”）没有出现在页面中，因为它不在视口中。

我已经尝试删除所有可能干扰Materialize的CSS，但问题仍然存在。感谢您提供任何见识。

Answer 1

您的标签页应用了直接样式：

vars = set()

class DummyDict:
    def __getitem__(self, key):
        vars.add(key)
        return 'X'

str(Template('Hello $A $B $C', searchList=[DummyDict()]))

print(vars)

过去，与旋转木马相关的问题与此类似，更改您的旋转木马的初始高度应可以解决此问题。

您在使用Jquery吗？

<div class="tabs-content carousel carousel-slider" style="height: 400px;">

MaterializeCSS-元素未出现在选项卡中

1 个答案: