CODEWITHSUNDEEP
jqueryhtmlcssjquery-uicss-selectors
Ramaswamy
Ramaswamy

Reputation: 79

Editable DIV HTML CSS

I need a div that should be 1. Resizeable and 2. Editable.

And should work in IE and Chrome.

So if I start to edit in the div and if i reach the end of the line in that div then the cursor should move to next line. How do i achieve it.

Below is the code i tried but it does work in IE but not properly. However it is not working in chrome. Any help would be appreciated. Thanks!

$("#resizable").resizable();
#resizable {
  width: 500px;
  height: 500px;
  background: #ccc;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body contenteditable="false">


  <div id="resizable" contenteditable="true"></div>

Upvotes: 0

Views: 1600

Answers (3)

Alessandro
Alessandro

Reputation: 4472

It's seems a bug, when the div is empty the typed text is writed in the first "child" that's the right draggable bar.

As you can see in the DOM (at 2nd line):

<div id="resizable" contenteditable="true" class="ui-resizable" style="height: 121px; width: 197px;">
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;">THE TYPED TEXT GOES HERE!</div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
</div>

Anyway, you could simply put an empty char (&nbsp;) into the div and it works. See following snippet please:

$( ".resizable" ).resizable();
.resizable {
  width: 100px;
  height: 100px;
  background: #ccc;
}

.grid {
  float: left;
  margin: 0.5em;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="grid">
  Editable div:
  <div class="resizable" contenteditable="true">&nbsp;</div>
</div>
<div class="grid">
  Not editable div:
  <div class="resizable" contenteditable="true"></div>
</div>

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78590

For whatever reason, chrome is adding the content you're typing into the box to the right drag handle. You can use the create callback to disable content editing on the drag handles to get it to work in chrome.

$("#resizable").resizable({
  create: function( event, ui ) {
    this.childNodes.forEach(function(child){
      child.contentEditable = false;
    });
  }
});
#resizable {
  width: 500px;
  height: 500px;
  background: #ccc;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body contenteditable="false">


  <div id="resizable" contenteditable="true"></div>

Upvotes: 1

mathius1
mathius1

Reputation: 1391

Does it need to be a div element? This is what textarea elements are for.

<textarea rows="4" cols="50">
This is editable.
</textarea>

Upvotes: 0

Related Questions