CODEWITHSUNDEEP
htmlcss
Stephen305
Stephen305

Reputation: 1097

Make a div inside a td resizable

I have a div inside a td element. The div is resizable and it has overflow scroll. The problem is that the div resizes when I use JQuery to change the contents of the div. What I want is for the div to stay the same size when its contents change. Can someone tell me how to do this?

<table>
  <tr>
    <td style="text-align: right">Date: 8-29-2013</td>
    <td></td>
  </tr>
  <tr>
    <td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both; min-height:300px;min-width: 300px;"></div></td>
    <td style="vertical-align: top"><button id="edit">Edit</button></td> 
  </tr>
</table>

<script>
  $('#edit').click(function(){
    $('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
  });
</script>

Upvotes: 0

Views: 1180

Answers (3)

nadi77
nadi77

Reputation: 23

You need add the width to the div

<div id="mydiv" style="border: 1px solid black; overflow:scroll; 
     resize: both; width:300px min-height:300px;"></div>

Upvotes: 1

Kiran
Kiran

Reputation: 20313

You need to set width to either Parent Element i.e., table or child element which you don't want to increase width. i.e, div.

I added width to parent element so that all child elements can control with that.

CODE:

#table{
    width:165px;
}

<table id="table">
  <tr>
    <td style="text-align: right">Date: 8-29-2013</td>
    <td></td>
  </tr>
  <tr>
    <td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both;min-height: 300px;"></div></td>
    <td style="vertical-align: top"><button id="edit">Edit</button></td> 
  </tr>
</table>


$('#edit').click(function(){
    $('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
  });

JSFIDDLE

NOTE: change width according to your requirement.

Upvotes: 1

Daniel Cheung
Daniel Cheung

Reputation: 4819

Perhaps it is because you have 2 min-heights. You need a max-height

Upvotes: 0

Related Questions