CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nwalke
nwalke

Reputation: 3209

Grow div height to show all contents with javascript

I am trying to make a very simple HTML preview pane as the user types in HTML. Take a look here.

It's very simple in execution. Take the value of the text area, make it the HTML of the div next to it.

$('#message-preview').html($('#message').val());

The issue I'm running into, is that the preview pane, needs to grow height wise in order to accommodate all of the HTML that is being input into the left text area. I notice (as I'm typing this) that SO already does this in their preview panes. Is there an easy way to adjust heights of things to their inner contents while also having them next to each other?

Upvotes: 2

Views: 631

Answers (3)

TimPalmer
TimPalmer

Reputation: 119

Because of the way that you have nested the message-preview in the fieldset and set the overflow to hidden, it will only ever be the height of the fieldset and will be constricted by the height thereof.

You can get around the problem by removing the overflow property of the fieldset and by setting the height of the fieldset to auto. This means the fieldset and the message-preview will be able to grow as needed.

fieldset {
  position: relative;
  width: 100%;
  height: auto;
}

#message-preview {
  position: absolute;
  right: 0;
  width: 310px;
}

I hope this helps.

Upvotes: -1

RononDex
RononDex

Reputation: 4183

You can use the css approach from caramba or use the following javascript approach:

$('#message-preview').height($('#message-preview').offsetHeight());

http://jsfiddle.net/xnPu7/7/

Upvotes: 0

caramba
caramba

Reputation: 22490

change 

position:absolute;

to 

position:relative;float:right;

so it looks like this:

<div id="message-preview" class="well" style="position: relative; right: 0; width: 310px;float:right;"></div>

http://jsfiddle.net/xnPu7/2/

Upvotes: 4

Related Questions