CODEWITHSUNDEEP
bordercss
jQuerybeast
jQuerybeast

Reputation: 14510

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/

Upvotes: 2

Views: 995

Answers (3)

Ayyappan K
Ayyappan K

Reputation: 1186

Please refer this:

Html:

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

    </div>
    <div contenteditable="true" class="content">
        asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
    </div>

</div>

CSS:

#box{width:200px;border:1px solid grey;min-height:200px;padding:10px;}
.dblline{margin-left:15px;position:absolute}
.content{padding:0 10px;border-left:3px solid red; overflow-wrap: break-word;}

Refer link:

Upvotes: 0

Frg
Frg

Reputation: 406

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>

Upvotes: 1

Rizwan Mumtaz
Rizwan Mumtaz

Reputation: 83

dblline is the direct parent of #box div. So you cannot set its height to the content of the content class. There are two alternative for your markup.

  1. Define a border div inside content and make its height auto.
  2. Add border-left property to your content class.

Upvotes: 0

Related Questions