聚合物元素纸张输入的包装验证错误

Question

我注意到，如果我的自定义 Polymer 1.x 元素的宽度比纸张输入元素上验证错误消息的宽度窄，则错误会溢出到自定义元素的右边框之外。见下图：

是否有防止溢出的机制，例如当文本到达自定义元素的边界时换行？

谢谢

Answer 1

<dom-module id='app-element'>
  <template>
    <style>
      /* this style is only to reproduce the problem */
      :host {
        display: block;
        width: 60px;
        height: 100px;
        border: 3px solid green;
      }

您可以通过指定宽度来裁剪太长的文本

      :root {
        --paper-input-error: {
          /*-o-text-overflow: ellipsis; // or clip*/
          /*text-overflow: ellipsis; // or clip */
          width: 60px;
        };
        --paper-input-container-invalid-color: orange;
      }

这种方式动态调整宽度但可能会破坏其他东西（不知道）

      :root {
        --paper-input-container: {
          position: relative;
        };

        --paper-input-error: {
          position: absolute; 
          width: 100%;
        }
      }

或者让它像

一样崩溃

      :root {
        --paper-input-error: {
          position: relative; // or  width: 60px;
          height: 50px;
          white-space: normal;
          word-wrap: break-word;
          line-height: initial;
        };
      }

其余元素标记

    </style>
    <paper-input label="only type letters (auto-validate)" auto-validate pattern="[0-9]*" error-message="Only digits from (0 to 9) are allowed."></paper-input>
  </template>
</dom-module>

我还尝试添加自定义插件而不是默认插件 <error-element>，但失败了（另请参阅 https://github.com/PolymerElements/paper-input/issues/262#issuecomment-160109256）

聚合物元素纸张输入的包装验证错误

Wrapping validation errors for polymer-element paper-input

dart

polymer

dart-polymer

polymer-elements