Question

我正试图设定gold-email-input的高度。我尝试用以下方式设置高度：

gold-email-input {
    background-color: var(--light-theme-base-color);
    width: 100%;
    height: 48px;
    max-width: 670px;
    padding: 0px;

    --paper-input-container: {
        max-height: 48px;
    };
}

但是当paper-input-container调整为48px时，我会尝试61px停留gold-email-input。我能做些什么来解决这个问题吗？

Answer 1

如果您希望paper-input-container的高度与gold-email-input的高度相匹配，您可以将其height设置为100%，并清除其margin和padding：

gold-email-input {
  --paper-input-container: {
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

要设置自定义元素之外的gold-email-input样式，请务必使用custom-style：

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="gold-email-input/gold-email-input.html">
</head>
<body>
  <style is="custom-style">
    :root {
      --light-theme-base-color: rgba(0,112,0,0.4);
    }
    gold-email-input {
      background-color: var(--light-theme-base-color);
      width: 100%;
      height: 248px;
      max-width: 670px;
      padding: 0px;

      --paper-input-container: {
        outline: solid 3px red;
        height: 100%;
        margin: 0;
        padding: 0;
      };
    }
  </style>
  <gold-email-input></gold-email-input>
</body>

^codepen

在自定义元素中，您可以在custom-style内正常使用该样式（即没有dom-module）：

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="gold-email-input/gold-email-input.html">
</head>
<body>
  <style is="custom-style">
    :root {
      --light-theme-base-color: rgba(0,112,0,0.4);
    }
  </style>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <style>
      gold-email-input {
        background-color: var(--light-theme-base-color);
        width: 100%;
        height: 248px;
        max-width: 670px;
        padding: 0px;

        --paper-input-container: {
          outline: solid 3px red;
          height: 100%;
          margin: 0;
          padding: 0;
        };
      }
    </style>
    <template>
      <gold-email-input></gold-email-input>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
</body>

^codepen

改变聚合物中金 - 电子邮件输入的大小

1 个答案: