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.
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>
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;
}
I want to make a background image to be seen over div. Anything that I've tried with z-index didn't helped me. Image itself has not standard shape and glowing border. As image ends ideally "logo2" should imitate that "glowing" by box-shadow parameter. But anything I've tried "logo2" always over "logo" crosses the image. This is how I want it to be like site.com/logo2.png
.logo {
background: url(site.com/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 100%;
height: 50px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:relative;
z-index:10;
<div class="logo">
<div class="logo2"></div>
</div>
I guess this is what you want. You can adjust width of .logo2 accordingly
.logo {
background: url(http://homeworld.su/logo.png) no-repeat;
height: 200px;
z-index:100;
position:relative;
}
.logo2 {
width: 20%;
height: 40px;
background-color: #000;
padding: 10px 0px 10px 0px;
border-radius: 10px;
border: 1px solid #7b0000;
box-shadow: 0px 0px 2px 2px #d09d00;
position:absolute;
top:10px;
left:495px;
<div class="logo">
<div class="logo2"></div>
</div>
I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.
<div style="border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:none;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;">
<strong style="font-size:18px; color:#000">ABC</strong>
</div>
<div style="width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;">
Hello
</div>
Can anybody help me to solve this error.
jsFiddle: http://jsfiddle.net/9XFDp/1/
Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine
Demo
Added the below properties to the header div
position: relative;
top: 1px;
background: #fff;
z-index: 1;
Note: Don't use inline CSS, create classes instead.
Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)
Like this
DEMO
CSS
.title{
border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:1px solid #ffffff;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;
font-size:18px; color:#000
font-weight:bold;
position:relative;
top:1px;
}
.content{
width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;
}
The border color doesn't show on mobile when using responsive at the same time seems to be fine at desk with mobile resolution testing.
Here is the screen shot from iPod:
Here is the CSS code:
.box img {
display: block !important;
margin-top: 8px;
border: 1px solid #CCC;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Border color appear only on Nokia Lumia 920
What can I try to resolve this?
It is -webkit bug. Still didn't find exact solution by the way I got temporary solution from #SonuJoshi which is remove add box-shadow instead of border
Old code
.box img {
display: block !important;
margin-top: 8px;
border: 1px solid #CCC;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
New code
.box img{
overflow: hidden;
margin-top: 8px;
-webkit-box-shadow: 0px 0px 0px 1px #CCC;
-moz-box-shadow: 0px 0px 0px 1px #CCC;
box-shadow: 0px 0px 0px 1px #CCC;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
Thanks for all help :)
Apply this css in container of the image not the image...
.box{
display: inline-block;
margin-top: 8px;
border: 1px solid #CCC;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.box img { width:100%; margin-bottom:-1px; }
the code will be
.box img { width:100%; margin-bottom:-1px; }
I try to implement a tab bar with extra padding on hover state.
But the problem is on hover state actually it moves parent div.
You can see the html below;
<div id="statNav">
Gogus
Kol
Gogus
Gogus
Gogus
Omuz
Gogus
</div>
and css;
#statNav{
width:100%;
border-bottom:2px solid #9B2F2C;
overflow:auto;
}
#statNav a{
float:left;
background-color:#333333;
color:white;
font-size:12px;
font-weight:bold;
text-align:center;
width:62px;
padding-top: 5px;
padding-bottom:5px;
border-right: 1px solid #777777;
}
#statNav a:first-child{
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
}
#statNav a:last-child{
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
border-right:none;
width:63px;
}
#statNav a:hover{
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
background-color:#9B2F2C;
padding-top: 15px;
}
Here is the working sample;
http://jsfiddle.net/Kg3p4/
How can i solve it?
You can solve this by using margins on the non-hovered tabs and removing them on hover to counter the increased padding size. Note that the size of the margins is equal to the difference between your hovered and non-hovered padding.
#statNav a{
margin-top: 10px;
padding-top: 5px;
}
#statNav a:hover{
margin-top: 0;
padding-top: 15px;
}
I've updated your jsFiddle with a simple demo of this solution.
You can modify the hover state a bit by adding a negative margin-bottom equal to the padding difference. Something like this :
#statNav a:hover{
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
background-color:#9B2F2C;
padding-top: 10px;
margin-bottom: -5px;
}
http://jsfiddle.net/Kg3p4/5/