Add white background on textfield labels

[Tyler Childs]

if a user types in a text area, the label will overlap the text content.

[Tyler Childs]

This is unresolved right now:

1. Padding on the textfield only applied in the default state, once enough lines are added, the content goes up where there was padding
2. The label is absolutely positioned, so it renders above the text.
3. If we swap the padding and margin around, we lose the ability to have the :focus border around the whole textfield.

Need to think on this one a little bit.

[Ali Can YILDIZ]

@tylerchilds This issue seems really hard for me but using this code on the .textfield__label can provide temporary help.

white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;

Demo: https://jsfiddle.net/59ztxj4a/

[Ali Can YILDIZ]

https://jsfiddle.net/hemr7gdu/ this is visually correct but an ugly primitive experiment. it has an additional span element after the input.

[tcme]

Overlapping could be fixed by adding a higher z-index (200?) and background-color, but then multiline labels wont work.

Supporting multiline textfield__label is hard, but could be done with reversing order by flex-direction: column-reverse and moving border styles to a pseudo element.

/* visually revers textarea and label*/
.textfield {
    display: flex;
    flex-direction: column-reverse;
}

.textfield__label {
    /* position: relative; */
}

/* remove focus styles */
.textfield *:focus {
    /* border-color: #E83FB8; */
    /* box-shadow: 0 1px 2px 0 #dededf inset; */
}

/* add a pseudo element for the border styling*/ 
textarea + .textfield__label:before {
    border: 1px solid #7d7d7e;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    right: 0;
    bottom: 0;
}

textarea:focus + .textfield__label:before {
    border-color: #e528b0;
}

I only tested this on Chrome and copied the styles form devtool so it might be incomlete, but you get the idea. Not sure if I like this solution yet.

[Tyler Childs]

Closing this out, multiline labels fundamentally break Cutestrap in multiple ways:

1. Rhythm would get thrown off if it was in document flow
2. Putting it in flow alters the dimension of the input and messes with focus outline

Recommendation to use short field names with longer context as a placeholder attribute on the form control.