jQuerybeast jQuerybeast - 1 month ago 12
CSS Question

Make div height auto or 100%?

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/

Frg Frg
Answer

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>
Comments