Hey guys I have problems with contenteditable height. With code like this:
function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
} .preview{
text-align: left;
color: white;
margin-left: 10px;
max-height: 300px;
overflow: auto;
}<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?></h1>
</body>
</html>
</textarea>
<div class="flex">
<a href="#" class="myButton" onclick="Preview()">Preview</a>
<a href="#" class="myButton" onclick="Reset()">Reset</a>
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>When I enter code with more I can observe effect like this:
Anyone can help me with limit contenteditable height?
</div>
