The problem I'm having is with the contentEditable attribute in IE. (some things never change).
The problem is that I'm getting resize handles, and a thick border around <li>
elements when they're in focus.
Any idea of how to remove them? CSS or Javascript tricks are very welcome!
To disable resizable property of an element use resize to none. It is the default value.
Just set contentEditable="false" . See this answer.
You can add the contenteditable="true" HTML attribute to the element (a <div> for example) that you want to be editable. If you're anticipating a user to only update a word or two within a paragraph, then you could make a <p> itself editable.
Make sure the <li>
s don't have "layout", since elements with "layout" inside an editable element get resize handles in IE. "Layout" is a hidden property of an element in IE that is set to true
when any one of various CSS properties are enabled:
position
: absolute
float
(left
or right
)width
or height
(any value other than auto
)min-width
or min-height
(any value other than none
)overflow
(hidden | scroll | auto
)zoom
(any value other than normal)display
: inline-block
Here's a link from a quick googling that explains a bit more about layout: https://www.sitepoint.com/internet-explorer-haslayout-property/
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