Styling for errorMessage and charCounter

[stramel]

Description

errorMessage and charCounter aren't accounted for in styling so they are often clipped due to other elements sitting underneath it.

Expected outcome

When an errorMessage or charCounter are present they should be fully displayed when another element is directly underneath it.

Actual outcome

When an errorMessage or charCounter are present they are clipped when another element is directly underneath it.

Live Demo

Browsers Affected

I believe all of these are affected but I have only tried Chrome.

• [x] Chrome
• [x] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[xelra]

I just ran into this problem myself. The funny thing is that it was working in my app and then suddenly I noticed the clipping just now.

Then I saw that even the demo is affected.

I can confirm that this also affects Firefox and Opera in addition to Chrome.

Does anyone have an intermediate fix? I've been playing with the CSS for some time now, but I just can't find the right values to change.

EDIT: Found it! It's the padding on the paper-input-container.

EDIT2: After doing some pixel counting, the exact value is padding-bottom: 20px. That adds 12 pixels at the bottom. This makes spacing between the inputs pretty big though. There's the possibility of saving 8 pixels at the top, without interfering with any other divs. So for now I'm also setting padding-top: 0px.

EDIT3: Well, you can't actually apply it to paper-input-container when using paper-input, because the CSS rule doesn't apply. I just did that directly in Chrome. So again, I don't see an easy fix.

EDIT4: I guess the only fix is to not use paper-input. I've switched to directly using paper-input-container which has its own issues. Including the fix for those, the code for a working solution that has 4px more height than the original and a different symmetry is

paper-input-container {
    padding-top: 0px;   // Originally 8px
    padding-bottom: 20px;   // Originally 8px
}

input {
    position: relative;
    outline: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    color: var(--paper-input-container-input-color, var(--primary-text-color));
    -webkit-appearance: none;
    text-align: inherit;
    vertical-align: bottom;
    min-width: 0;
    font-family: var(--paper-font-subhead_-_font-family);
    -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
    font-size: var(--paper-font-subhead_-_font-size);
    font-weight: var(--paper-font-subhead_-_font-weight);
    line-height: var(--paper-font-subhead_-_line-height);
}

<paper-input-container invalid>
    <label slot="label">My awesome label</label>
    <iron-input slot="input">
        <input>
    </iron-input>
    <paper-input-error slot="add-on">My awesome error!</paper-input-error>
</paper-input-container>

The necessary CSS fix for the <input> is "stolen" directly from the code of <paper-input>.

[xelra]

I have identified the problem. <paper-input-container> is styled with overflow: hidden, which breaks the inheritance chain of visible overflow. Changing it to overflow: inherit or completely removing it from :host {} should fix the issue.

In the meantime use it like this

:host {
    --paper-input-container: {
        overflow: inherit;
    }
}

[notwaldorf]

This bug was introduced in 2.0.4 (it was trying to fix something else, sigh), and there’s a PR out to fix it! Will merge and do a release tomorrow, hopeful. Sorry about that! On Tue, Dec 5, 2017 at 1:41 PM xelra notifications@github.com wrote:

I have identified the problem. is styled with overflow: hidden, which breaks the inheritance chain of visible overflow. Changing it to overflow: inherit or completely removing it from :host {} should fix the issue.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/PolymerElements/paper-input/issues/583#issuecomment-349450799, or mute the thread https://github.com/notifications/unsubscribe-auth/ABTkUh4J4GTVNKhE93tQUfsWbHr2z_9fks5s9biKgaJpZM4QJhgN .

[notwaldorf]

Closing as a dupe of #597, which has a better pinpoint to the actual error