包裝紙輸入錯誤消息

紙張輸入中的長錯誤消息溢出屏幕。請參閱下面的jsbin包裝紙輸入錯誤消息

http://jsbin.com/beyigocosi/edit?html,console,output

只需點擊提交，而無需輸入任何值。我試圖用mixin paper-input-error修復它，但沒有取得太大的成功。

代碼：

<!doctype html> 
<head> 

    <meta charset="utf-8"> 

    <base href="http://polymer-magic-server.appspot.com/components/"> 

    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 

    <link href="polymer/polymer.html" rel="import"> 
    <link href="paper-styles/paper-styles.html" rel="import"> 
    <link href="paper-material/paper-material.html" rel="import"> 
    <link href="paper-input/paper-input.html" rel="import"> 
    <link href="paper-button/paper-button.html" rel="import"> 
    <link href="iron-form/iron-form.html" rel="import"> 


    <style> 
    body { 
     font-family: sans-serif; 
    } 
    </style> 

</head> 
<body> 

<x-example></x-example> 

<dom-module id="x-example"> 
    <style> 
    :host { 
     display: block; 
    } 
    paper-material { 
     padding: 24px; 
    } 
    paper-button { 
     margin-top: 24px; 
     background-color: var(--paper-red-400); 
     color: var(--text-primary-color); 
    } 

    </style> 
    <template> 
    <form is="iron-form" 
      id="formTest" 
      action="/" 
      method="get" 
      disable-native-validation-ui> 
    <paper-material> 
     <h2>Sample form</h2> 
     <paper-input 
     required 
     type="text" 
     error-message="This is a reallllllllllllllllllyyyyyyyyyyyy realllllllllllllllllyyyyyyyyyy lllllllllllllllllllllong error message that is going to overflow the screen which neeeeeeeeeeeeeeeeeeeeeeeeeds to be fixed" 
     label="Enter user name" 
     name="username"> 
     </paper-input> 
     <paper-input 
     text="password" 
     required 
     error-message="This is a another realllllllllllllllllllllly reallllllllllyyyyyyyyyyyy lllllllllllllllllllllllong error message that is going to overflow the screen which neeeeeeeeeeeeeeeeeeeeds to be fixed" 
     label="Enter password" 
     name="password"> 
     </paper-input> 
     <paper-button 
     on-tap="submitForm">SUBMIT</paper-button> 
    </paper-material> 

    </form> 

    </template> 
    <script> 

    // only need this when both (1) in the main document and (2) on non-Chrome browsers 
    addEventListener('WebComponentsReady', function() { 

     Polymer({ 
     is: "x-example", 
     properties: { 
      selected: { 
      type: String, 
      value: 'one' 
      } 
     }, 
     submitForm: function() { 
      this.$.formTest.submit(); 
     } 
     }); 
    }); 

    </script> 
</dom-module> 
</body>

來源

2015-10-03 Srik

這不清楚你在這裏問什麼。 – stef

@stef - 如果您點擊「提交」它會顯示溢出窗體的錯誤消息。我正在嘗試在表單中包裝消息。 – Srik

你基本上需要從nowrap內paper-input-error的white-space屬性更新normal。這可以通過Custom CSS Properties做 -

paper-input { 
    --paper-input-error: { 
    white-space: normal; 
    }; 
}

你也可能要添加到position: relative;它也因此錯誤文本不重疊之下其他元素時，它的足夠長的時間。

來源

2015-10-03 23:49:17

即使未顯示錯誤消息，它也會在文本字段下面添加兩到三個空行。 – Srik

由於內容是爲錯誤文本保留的。當驗證沒有被觸發時，您可以嘗試摺疊它，但這樣做意味着在插入其他文本時，內容也會「跳」* –

我無法對紙張輸入錯誤進行很多更改。我在使用聚合物標籤找出如何做到這一點時提出了這個問題。 – Srik

包裝紙輸入錯誤消息

回答

相關問題