CODEWITHSUNDEEP
javascriptjqueryhtmlcss
maudulus
maudulus

Reputation: 11035

Expand a div's width dynamically to content once div height has reached the max-height

I have a class of divs that I need to dynamically change the width of in case the div grows beyond the height of the max-height of 120px. The reason it needs to grow dynamically is that I'm appending text content to the div and sometimes there is too much text to fit.

Right now, the div appears as follows: HTML

<div class="arrow_box"></div>

CSS

.arrow_box{
  width:320px;
  max-height:120px;
}

JS

var timelineSentences = ["OjVIQgtdei NFrqcgRKpy orPfulDVcs eisVloPqXC wfSFifDQqK ghPZyeNKJE wryCLNvlQp pOErunxEtg FyZlcZxkhl xfNSVRuymx HxKxiRTYza AnyUKcgKNO gsYuTscCvx VjIphTkFSc LxmDDASiuI HbWLNJpsVC tTtmBMJsHd asXCGlFqxS vBGpsVkgtN gCPTSKWzog dsAZwIwPbC pWZanKGAFZ dielrXJNMb LZqwCdRtIT viqdgYHGfp PUxhrwKfkG MaiiJUYFOo cfAXxiHTNB TxOqTtxvmg gzmKznNrJF"]

$('.arrow_box').append('<p  style="margin-bottom:0;padding:10px;">'+timelineSentences[0]+'</p>');

I saw a couple of related posts A B but couldn't derive an answer from them after a number of attempts to adjust the scrollHeight

Upvotes: 0

Views: 1163

Answers (1)

krishnaxv
krishnaxv

Reputation: 956

Please go through the code below. It works based on the scrollHeight.

Pure JavaScript solution

Sample <div>

<div class="arrow_box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Approach 1 - If scrollHeight is greater than maxHeight, make <div> 100%

<script>
  var
    arrowBox = document.querySelector('.arrow_box'),  // Get element
    scrollHeight = arrowBox.scrollHeight,  // Get scrollHeight
    maxHeight = 120;

  if (scrollHeight > maxHeight) {
    // Make width as 100%
    arrowBox.style.width = '100%';
  }
</script>

Approach 2 - Increase width equivalent to the exceeded height in pixels

<script>
  var
    arrowBox = document.querySelector('.arrow_box'),  // Get element
    scrollHeight = arrowBox.scrollHeight,  // Get scrollHeight
    maxHeight = 120,
    constantFactor = 3;  // To make sure after readjusting the width, content does not overflow again

  if (scrollHeight > maxHeight) {
    // Increase width equivalent to the exceeded height in pixels
    var extraPx = (scrollHeight - maxHeight) * constantFactor;
    arrowBox.style.width = (arrowBox.offsetWidth + extraPx) + 'px';
  }
</script>

jQuery solution with both the approach!

(document).ready(function() {
  var timelineSentences = ["OjVIQgtdei NFrqcgRKpy orPfulDVcs eisVloPqXC wfSFifDQqK ghPZyeNKJE wryCLNvlQp pOErunxEtg FyZlcZxkhl xfNSVRuymx HxKxiRTYza AnyUKcgKNO gsYuTscCvx VjIphTkFSc LxmDDASiuI HbWLNJpsVC tTtmBMJsHd asXCGlFqxS vBGpsVkgtN gCPTSKWzog dsAZwIwPbC pWZanKGAFZ dielrXJNMb LZqwCdRtIT viqdgYHGfp PUxhrwKfkG MaiiJUYFOo cfAXxiHTNB TxOqTtxvmg gzmKznNrJF"]

  $('.arrow_box').append('<p style="margin-bottom: 0; padding: 10px;">' + timelineSentences[0] + '</p>');

  // ...
  // CODE BELOW
  // ...

Approach 1 - If scrollHeight is greater than maxHeight, make <div> 100%

  var
    arrowBox = $('.arrow_box'),  // Get element
    scrollHeight = arrowBox.prop('scrollHeight'),  // Get scrollHeight
    maxHeight = 120;

  if (scrollHeight > maxHeight) {
    // Make width as 100%
    arrowBox.width('100%');
  }
});  // Close ready() function

Approach 2 - Increase width equivalent to the exceeded height in pixels

  var
    arrowBox = $('.arrow_box'),  // Get element
    scrollHeight = arrowBox.prop('scrollHeight'),  // Get scrollHeight
    maxHeight = 120,
    constantFactor = 3;  // To make sure after readjusting the width, content does not overflow again

  if (scrollHeight > maxHeight) {
    // Increase width equivalent to the exceeded height in pixels
    var extraPx = (scrollHeight - maxHeight) * constantFactor;
    arrowBox.width((arrowBox.width() + extraPx) + 'px');
  }
});  // Close ready() function

Hope it helps!

Upvotes: 1

Related Questions