1

I notice that if the width of my custom Polymer 1.x element is narrower than the width of the validation error message on a paper-input element, the error overflows beyond the right border of the custom element. See graphic below:

enter image description here

Is there a mechanism to prevent the overflow eg wrapping the text when it reaches the border of the custom element?

Thanks

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
st_clair_clarke
  • 5,453
  • 13
  • 49
  • 75

1 Answers1

2
<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;
      }

You can clip the too long text by specifying a width

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

this way the width is adjusted dynamically but might break other things (no idea)

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

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

or make it break like

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

the rest of the elements markup

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

I also tried to add a custom add-on instead of the default <error-element>, but failed (see also https://github.com/PolymerElements/paper-input/issues/262#issuecomment-160109256)

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks Gunter. I like the last option the most. – st_clair_clarke Nov 27 '15 at 12:01
  • Glad to hear it works for you! Another way would be to clone the `` element, then you can put your own HTML at that place to show error information. For example a tooltip with more extensive information. `` is quite simple. Just another idea. – Günter Zöchbauer Nov 27 '15 at 12:03
  • Great idea! I will try it. If you know any current example that would give me a head start. – st_clair_clarke Nov 27 '15 at 15:10
  • The `` is itself the best example, or do you mean the tooltip? the demo code for the tooltip should do (https://github.com/bwu-dart/polymer_elements_demos/tree/master/web/paper_tooltip) – Günter Zöchbauer Nov 27 '15 at 15:17