Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove Resize handles and border from elements with contentEditable

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!

like image 227
Jared Savage Avatar asked Aug 30 '10 18:08

Jared Savage


People also ask

How do you stop an element from resizing?

To disable resizable property of an element use resize to none. It is the default value.

How do I turn off contentEditable in HTML?

Just set contentEditable="false" . See this answer.

How do I make contentEditable in Javascript?

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.


1 Answers

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
  • various others

Here's a link from a quick googling that explains a bit more about layout: https://www.sitepoint.com/internet-explorer-haslayout-property/

like image 71
Tim Down Avatar answered Oct 11 '22 21:10

Tim Down