Editable div positioned bottom

Editable div positioned bottom with max height and overflow scroll

by Roxana Cristea

HTML

<div id="my_app">
  <div id="top_container">
    NEW TEST
  </div>
  <div id="container">
    <div id="edit_container">
      <form>
        <div id="edit" contenteditable="true" data-text="Insert text"></div>
      </form>
    </div>
    <div id="test">
      ACTION
    </div>
  </div>
</div>

CSS

#my_app {
  background-color: #ff0000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}

#top_container {
  background-color: #00ff00;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 80px;
}

#container {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  background-color: #0000ff;
}

#edit_container {
  margin: 20px;
  min-height: 44px;
  width: 70%;
  height: auto;
  overflow: hidden;
  background-color: #484040;
  display: flex;
  align-items: center;
}

#edit {
  width: 100%;
  margin: 0px 20px;
  min-height: 20px;
  max-height: 80px;
  overflow: scroll;
  line-height: 20px;
  background-color: #ff5e2d;
}

#test {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  width: 30%;
  background-color: #ff0;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

[contentEditable=true]:empty:not(:focus):before {
  content: attr(data-text);
}

[contentEditable=true]:empty:focus:before {
  content: attr(data-text);
}

[contenteditable]:focus:after {
  content: '';
}

JavaScript

var edit = document.getElementById('edit');
document.getElementById('top_container').style.bottom = "90px";

function onKeyDown(event) {
  if (event && event.keyCode && event.keyCode === 13 && !event.shiftKey) {
    event.preventDefault();
    alert(document.getElementById('edit').innerHTML);
    document.getElementById('edit').innerHTML = '';
  }
  if (event && event.keyCode && event.keyCode === 13 && event.shiftKey) {
    let bottom = parseInt(document.getElementById('top_container').style.bottom.replace(/px/ig, ''), 10);
    bottom += 20;
    document.getElementById('top_container').style.bottom = bottom + 'px';
    console.log('bottom:', bottom);
  }
}

console.log('edit:', edit);
edit.addEventListener('keydown', onKeyDown, false);