3

The problem I'm having is with the contentEditable attribute in IE. The problem is that I'm getting resize handles, and a thick border around elements when they're in focus. The styles for with, height and display are needed. Any idea of how to remove them? CSS or Javascript

A simple example:

<html>
<head>
</head>

<body>

<div contentEditable="true" style="width: 50%; height: 50%; display: table" >
<div contentEditable="true" style="width: 50%; height: 50%; display: table-cell">
<p>aaa</p>
</div>
</div>

</body>
</html>
John
  • 1
  • 13
  • 98
  • 177
Wen Min
  • 31
  • 1
  • 2
  • Duplicate of http://stackoverflow.com/questions/1926525/removing-resize-handlers-on-contenteditable-div ? – bogatyrjov Jul 21 '11 at 07:20
  • The with and height style are needed, so it is not the same with the above question. Besides, only disable resize handle is not accepted – Wen Min Jul 21 '11 at 08:12
  • Possible duplicate of [How to disable elements selection and resizing in contenteditable div?](https://stackoverflow.com/questions/21864047/how-to-disable-elements-selection-and-resizing-in-contenteditable-div) – Kevin Lee Sep 19 '17 at 18:02

3 Answers3

1

We can wrap the outer div with contenteditable value as false to take away the resize handles. Below the the updated jsfiddle

<div>
<div contentEditable="false" style="width:50%; height:50%; display:table" >
    <div contentEditable="true" style="width:50%; height:50%; display:table-cell" >  
        <p>div1</p> 
    </div>  
</div>

<div contentEditable="false" style="width:50%; height:50%; display:table" >
    <div contentEditable="true" style="width:50%; height:50%; display:table-cell" >  
        <p>div2</p> 
    </div>  
</div>
Nitesh
  • 1,241
  • 4
  • 16
  • 25
1

Do You need contentEditable="true" defined twice ? If You delete the first one, the resize handles go away, although the functionality remains.

http://jsfiddle.net/2uphD/1/

bogatyrjov
  • 5,317
  • 9
  • 37
  • 61
0

You just should use resize: none for disable handlers:

<div 
  contenteditable
  style="max-height:200px;resize: none">
</div>

And this style to disable border on focus:

<style>
[contenteditable]:focus {
    outline: 0px solid transparent;
}
</style>
Andrew Zagarichuk
  • 469
  • 5
  • 9