Home/ Questions/Q 7516145
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T01:02:36+00:00

So I dont know exactly how to ask what I am looking for so

  • 0

So I dont know exactly how to ask what I am looking for so I might just post pictures.

I have this box of which it contains of 2 divs next to each other. Div with border-right and the content div:

enter image description here

and here is the HTML structure:

<div id="box">
    <div class="dblline">

    </div>
    <div contenteditable="true" class="content">
           *content goes here*
    </div>

</div>

Now as you can see, the place where the content is, is editable thus making its height expand as you type. The border-right div, has min-height so it can expand as the content area expands (?) but it doesn’t seem to work and here is question:

How can I expand the border too as the content expands so it doesnt look like this:

enter image description here

This is my CSS:

#box {width:200px;border:1px solid grey}

.dblline {border-right:3px solid rgba(0, 0, 0, .5);margin-left:15px;
 min-height:200px;position:absolute}

.content {padding:10px 20px 10px 30px ;}​

jsFiddle: http://jsfiddle.net/7tcWN/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Specific solution

    This one is for browsers without Javascript. It just creates the border in the div of the text, therefore it automatically scales. Weakness: when browser highlight the box while editing they only highlight the part on the right of the vertical rule, which looks odd.

    <html><head><style>
#box { width: 200px; border: 1px solid grey; }
.content {
    border-left: 3px solid rgba(0, 0, 0, .5);
    padding: 10px 20px 10px 12px;
    margin-left: 15px;
    min-height: 200px;
}​
</style></head><body>
<div id="box">
    <div contenteditable="true" class="content">
       *content goes here*
    </div>
</div>
</body></html>

    And now for the other one…

    Complete jQuery solution

    Unfortunately there is no change event that works with this type of editable field. I have tested other events and came up with these required three:

    • keyup – for normal typing,
    • keydown – when you press and hold a key,
    • mousemove – for drag and drop.

    Notice there’s a mousemove instead of mouseup, because text isn’t pasted yet, when the latter is triggered. You could probably get away with setTimeout on such occasion, but to keep things simple I went with mousemove. Here’s the code (with extra debug logging when you uncomment one line):

    <html><head><script src="jquery.min.js"></script><style>
#box { width: 200px; border: 1px solid grey; }
.dblline {
    border-right: 3px solid rgba(0, 0, 0, .5);
    margin-left: 15px;
    min-height: 220px;
    position: absolute;
}
.content { 
    padding: 10px 20px 10px 30px;
    min-height: 200px;
}​
</style><script>
function resize_rule(msg) {
    //if (msg) console.log(msg);
    var H = $("#box .content").outerHeight();
    var h = $("#box .dblline").height();
    if (h != H) $("#box .dblline").height(H);
}
$(document).ready(function() {
    $("#box .content").keydown(function(){resize_rule("keydown");});
    $("#box .content").keyup(function(){resize_rule("keyup");});
    $("#box .content").mousemove(function(){resize_rule("mousemove");});
});
</script></head><body>
<div id="box">
    <div class="dblline">
    </div>
    <div contenteditable="true" class="content">
           *content goes here*
    </div>
</div>
</body></html>
    • 0