CODEWITHSUNDEEP
javascripthtmlcssinternet-explorercontenteditable
Wen Min
Wen Min

Reputation: 31

How to Remove Resize handles and border of div with contentEditable and size style

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>

Upvotes: 3

Views: 6591

Answers (3)

Andrew Zagarichuk
Andrew Zagarichuk

Reputation: 509

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>

Upvotes: 0

Nitesh
Nitesh

Reputation: 1267

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>

Upvotes: 1

bogatyrjov
bogatyrjov

Reputation: 5378

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/

Upvotes: 1

Related Questions