Home/ Questions/Q 8768329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T17:02:26+00:00

I am working on a project of HTML and javascript. I have follwing code:-

  • 0

I am working on a project of HTML and javascript. I have follwing code:-

<html>
<head>
<style type="text/css">
    .mainDiv
    {
        border:1px solid black;
        width:500px;
        height:340px;
        left:400px;
        position: absolute;
    }

    .textOutsideDiv
    {
        border: 1px dashed black;
        position: absolute;
        display: none;
        width:20px;
        height: 20px; 
    }
    .textInsideDiv {
        position:absolute;
        display:none;
        background: none repeat scroll 0 0 transparent;
        border: medium none;
        font-family: Arial,Helvetica;
        line-height: 1em;
        margin: 0;
        min-height: 1em;
        min-width: 1px;
        outline: medium none;
        padding: 2px;
        position: relative;
        white-space: nowrap;
        z-index: 2;
    }
</style>
<script type="text/javascript">
    function makeTextCanvas(e)
    {
        var mouseX=e.pageX-401;
        var mouseY=e.pageY-9;
        var existOrNot=document.getElementById('textOutsideDiv').style.display;

        if(existOrNot=="" || existOrNot=="none")
        {   
            var outerContainer=document.getElementById('textOutsideDiv');
            var innerContainer=document.getElementById('textInsideDiv');

            outerContainer.style.display='block';
            outerContainer.style.left=mouseX+'px';
            outerContainer.style.top=mouseY+'px';

            innerContainer.style.display='block';
        }

    }
    function makeDiv()
    {
        //alert("Write Inside");
            var outerContainer=document.getElementById('textOutsideDiv');
            var innerContainer=document.getElementById('textInsideDiv');

            var h=innerContainer.offsetHeight;
            outerContainer.style.height=h+'px';

    }
</script>
</head>
<body>
<div id="mainDiv" class="mainDiv" onclick="makeTextCanvas(event);">
    <div id="textOutsideDiv" class="textOutsideDiv">
        <div id="textInsideDiv" class="textInsideDiv" contenteditable="true" onkeyup="makeDiv();" style="font-size: 1em; color: rgb(0, 170, 0);"></div>
    </div>
</div>
</body>
</html>

On changing content inside div, i am increasing outerContainer div’s height but i am facing a problem in getting width of Content Editable div. How can i solve this problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all you say that you want to get width of the inner div, but actually you are trying to get innerContainer.offsetHeight. Second, adding text to an element that has its width set to auto does not stretch it if its parent element has fixed width.

    If I understood correctly what you were trying to achieve, you want to expand your pseudo-textbox while the user is typing. Here is how you can expand it: http://jsfiddle.net/LwCWM/1/ , but there should be a better way of getting width of the text since non-monospace fonts have letters of various widths.

    • 0