Left padding overwritten on overflow? - html

Question

I got a textfield that expands when I start typing text, and indicates that it is OK since it has text - otherwise it's red, indicating it has not been filled out. I need left padding on this in all states, but when I write too much text and the text starts scrolling, the padding is ignored. Is there any way to fix this? I made a fiddle: https://jsfiddle.net/o1r9dp2L/1/
<div class="container"><div contentEditable=true id="test" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="Placeholder"></div></div>
CSS:
.container{
overflow: hidden;
margin:0px;
height:24px;
}
#test:not([value=""]) {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:0px;
padding-left:36px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
/*background-repeat: repeat-x 100% 100%;*/
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#000;
outline:0;
}
#test {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
#test:empty {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
The reason that there is a blank space to the left of the field is that I also have a checkbox there that can be used instead, that expands to cover the textfield and looks exactly the same. So either you fill in information, or you check the box to the left.

Answer 1

One way is to make the tick icon to have same white background color, so that it covers any overflowed text on the left. I also significantly reduced the size of the style code.
jsFiddle
body {
background: #fff;
}
.container {
position: relative;
margin: 20px 0;
}
.input {
cursor: text;
width: 100px;
display: inline-block;
vertical-align: top;
overflow: auto;
font-family: Quicksand, sans-serif;
font-size: 14px;
line-height: normal;
white-space: nowrap;
outline: 0;
border-radius: 3px;
border: 1px solid #999;
padding: 4px 10px;
box-sizing: border-box;
overflow: hidden;
}
.input:not(:empty) {
color: #000;
width: 130px;
right: 0;
padding-left: 24px;
}
.input:not(:empty):before {
content: "";
position: absolute;
left: 1px;
top: 1px;
bottom: 1px;
width: 22px;
border-radius: 3px;
background: #fff url(https://i.stack.imgur.com/A45oq.png) center / 70% no-repeat;
}
.input:empty {
background: pink;
color: red;
position: relative;
right: -24px;
}
.input:empty:before {
content: attr(data-placeholder);
}
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>

Answer 2

Edit: The below is meant to show you that the padding is not being overwritten on overflow. What is happening is that the padding is increasing the width of the element and the background image is just that - a background. To get around this, you can use a psuedo element to allow that background image to go over text. The text is still there, but it is underneath the image.
If I were you, I would check out the following tutorial on bootstrap's input groups. It may be helpful for you to see how bootstrap does this. You can then use JavaScript to change the image or HTML structure based on the input's state.
The problem is that the checkmark image was being used as a background image within the div. There is no way to make a background image go over text.
However, you can use a psuedo element for this.
jsfiddle
I've edited the image in Photoshop to have a transparent background, and then converted to a base64 URL (so I didn't have to host the image).
The psuedo element uses two background images, the reddish background underneath the green checkmark. This psuedo element is positioned absolutely and therefore goes over the text as desired.
#test:not([value=""]):before {
content: '';
position: fixed;
top: 13px;
left: 9px;
display: inline-block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAABvElEQVQ4jZ2UQUgbQRSGPxMkG1QapaKVXAwVFCQKkqCIi4cGPEixWBFEpELAUqQX9VDEXFQQcUEkekoPxVNBsZQiSopQzUENoqJFxNaStBAPqe7FuBDDeBKiZKPsD+8w88//zYM3TA46EkLoWXcU2Z3vf//nV08QyTVT92FQ96AQ4uGKLne8XPRtWxd9Qv5x+lsIgelRbWRS6q9jfm9TDoILUy0zjeVdgHHg2c6X7r4k/SAx6Xw1UmNmyzjwcrdB+RcvB3AWtsW8DpRbyxBwf2elfRbewHMm3VW9ElwZB6phORDX7ACt9paQnMdquq0PTCUtqnpVpKWwpm9HjkKej9CJqZJBZ/Hw/Zgu0L88NlW2NvG/NrhxEUlRAYB24ArE1CKAbnvrV7fE+qOBTU9sagkQTXy39KyfrGhgVQ9DHgXeYarEW12gZMrpAmvktxOfCyUFIHyx4PAfxxIb8bNxAE9JczhTd1mBYL10y17lkwU/aPh+BhhKAJTirXo2rZfKPmVzcayj7sW31xCEa6IA+fV4bCwZAwKUNq2O2p+GbpcDZdVz6e/uvnL0jLu/TdKiqVqeZpawFeSeZ7v/BqqSqeSPBBXnAAAAAElFTkSuQmCC'), url(http://i65.tinypic.com/1z3xah4.png);
background-repeat: no-repeat, repeat-x;
height: 15px;
width: 25px;
}
I've also removed the other instance of the background image.
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
Update:
To handle the case where the text is then cleared, I've added the following:
#test:empty:before {
content: '';
background-image: none;
width: 0;
position: static;
}