I have a div that has the attribute contenteditable="true"
it works, but chrome (Ubuntu 14.04) places the cursor outside of the div as seen in this image:
Why is it doing that? I am using this html (with smarty):
<div class="col-sm-6">
<div class="form-control" contenteditable="true" id="tags">
<div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
<div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
</div>
</div>
I am using this for the css:
.tag{
background-color: #01b6ef;
color: #012935;
display: inline-block;
padding: 1px 5px;
margin-right: 3px;
}
.tag a{
color: #ffffff;
margin-left: 5px;
font-size: 12px;
}
.tag a:hover{
color: #ffffff;
}
Is this a chrome bug, or is this something I can fix, and how?
http://jsfiddle.net/y3ms3f7a/1/
I was able to solve the issue by adding an input-group
to the form control, like so:
<div class="col-sm-6">
<div class="form-control" contenteditable="true" id="tags">
<div class="input-group">
<div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
<div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
</div>
</div>
</div>
You can see the fiddle here: http://jsfiddle.net/y3ms3f7a/5/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With