Search code examples
javascripthtmlcsswysiwyg

HTML Text editor div - force text to start from bottom - bottom to top textbox

In short, i want a textbox bottom to top that keeps the width and height that i defined. Keeping the cursor bottom left works when adding style position:relative, which makes the div automatically grow when text is added. When using position:absolute, the cursor changes to top-left.

How to reproduce the problem:

Open the jsfiddle and write bottom right more text into the textbox until it overflows. The goal is to keep the size of the div but at the same time keep the caret bottom left

I am forced to go with a div "contenteditable=true" in order to create a nice textbox. The div is created by a server "swellrt" and i can add attributes and styles but i can not change that the text is going into this one div.

The big picture of this it is about a collaborative text editor where the server takes care about the div where all text for all users is going and taking the edits from the users from the same div, posting and getting all changes using a live webrtc channel. On client side i can only change the style and attirbutes of the div which is controlled by the server.

enter image description here

The caret or cursor shall basically start and (as long as not moved by the user) stay at the bottom of the document.

I was able to do this with below example, but using position:relative, the div will grow in height on overflow (when we enter a lot of text). But when changing the position to absolute, the caret will start top left again.

https://jsfiddle.net/pa0owso5/20/

<html>
<style>
.canvas {

    background-color:   #fff;
    box-shadow:         0 4px 14px -4px #919191;
    border:             1px solid #e0e0e0;
    height: 200px;
    width:  400px;
    margin: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    word-wrap:break-word; 
    vertical-align: bottom;
    display: table-cell;
    word-wrap:break-word; 
    overflow: scroll; 

    vertical-align: bottom;
    display: table-cell;

    position:relative;
}

</style>

<div contenteditable=true class="canvas">
text should start bottom left
</div>
</html>

Key css elements i use currently are: 

vertical-align: bottom;
display: table-cell;
word-wrap:break-word; 
position:relative;
Solution

  • With use of position:relative your caret is able to know where the "bottom" of your canvas is. If you use position:absolute on your canvas class, this means that you are "master of this canvas", but of course also that you have to set all values on your own. This, subsequently, means that your caret does not know automatically where bottom is. Anyhow, you can add an additional "caret" class and give this class the information it needs to position itself.

    Try following in CSS:

        .canvas {

    background-color:   #fff;
    box-shadow:         0 4px 14px -4px #919191;
    border:             1px solid #e0e0e0;
    height: 300px;
    width:  500px;
    margin: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    word-wrap:break-word; 
    vertical-align: bottom;
    display: table-cell;
    word-wrap:break-word; 
    overflow: scroll; 

    vertical-align: bottom;
    display: table-cell;

    position:absolute;
}
.caret {
  margin-top: 250px;
  position: relative;
}

    And in your HTML:

    <div contenteditable=true class="canvas">
  <div contenteditable=true class="caret">
  testtext
  </div>
</div>

    Cheers!