gpt4 book ai didi

dart - 包装 polymer 元素纸张输入的验证错误

转载 作者:行者123 更新时间:2023-12-03 03:27:16 28 4
gpt4 key购买 nike

我注意到,如果我的自定义Polymer 1.x元素的宽度比纸张输入元素上的验证错误消息的宽度窄,那么错误将超出自定义元素的右边界。参见下图:

enter image description here

有没有一种机制可以防止溢出,例如在到达自定义元素的边界时自动换行?

谢谢

最佳答案

<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)

关于dart - 包装 polymer 元素纸张输入的验证错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33950951/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com