CODEWITHSUNDEEP
javascriptjqueryhtmlcss
siraj pathan
siraj pathan

Reputation: 1495

height is increasing automatically of div with contenteditable="true"

I've div with property contenteditable="true".

<div contenteditable="true" class="textarea"></div>

Requirements
1. Text should be center aligned vertically and horizontally.
2. Height should not increase automatically with increase in content inside that div, if content increases inside div, scrollbar need to display.

Here is js Fiddle

if you want, use jquery too.

Upvotes: 6

Views: 5292

Answers (2)

Firdauz
Firdauz

Reputation: 9

When u dont specify a height it will automatically grow vertically when more information is added into the div tage. But i think you will have to make sure the content is absolute and/or you can try this simple code to see if it helps

Try this, CSS code.

.scroll {
width:100px;
height:100px;
overflow:scroll;
}

HTML code

<div class="scroll">
SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE. SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.
</div>

Upvotes: 0

web-tiki
web-tiki

Reputation: 103760

You can wrap the contenteditable div in 2 containers, one for the width and height with overflow:auto; and one for the display-table; property so the text is horzontaly centered :

DEMO

HTML :

<div class="container1">
    <div class="container2">
        <div contenteditable="true" class="textarea"></div>
    </div>
</div>

CSS :

.container1{
    height:60px;
    width:273px; 
    overflow:auto;
    border:1px solid green;
}
.container2 {
    min-height:100%;

    display:table;
}
.textarea {
    width:273px;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    outline: none;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    word-wrap: break-word;
    overflow:hidden;
}

Upvotes: 3

Related Questions