Twitter Bootstrap Question posted in

How to set styling of div based on another div using Javascript?-Twitter bootstrap

i have a unique case here. So i have 2 divs, one on the left and one on right. How can i make it so that if the height of left div exceeds the height of the div on right, the function should make the heights equal and hide any text for the left div. So if i calculate the offsetheight on load and for one on right is 443 px and one on left is 583 px, it should make both heights equal and height the rest 140px of data of left one.

I created a pen

var text = document.getElementById('overflow_text')

function mounted() {
  var toggleBtn = document.getElementById('toggle_text')
  var offsetDiv = document.getElementById('offset_height')
  var offsetDivHeight = offsetDiv.offsetHeight + 'px'
  var textHeight = text.offsetHeight + 'px'
  console.log(textHeight)
  console.log(offsetDivHeight)
  if (textHeight > offsetHeight) {
    text.style.maxHeight = offsetDivHeight
    text.style.overflow = 'hidden'
    text.style.textOverflow = 'ellipsis'
    text.style.whiteSpace = 'nowrap'
  }
}
#toggle_text {
  cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<body onLoad='mounted()'>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p id='overflow_text' class="readMore">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
          vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
          Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
          congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
          Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
          vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
          vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
          vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec</p>
        <span onClick="myFunction()" id="toggle_text">Read More</span>
      </div>
      <div class="col-md-6">
        <p id="offset_height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
          vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
          Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,Donec vitae dui
          eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae
          scelerisque enim ligula venenatis dolor. Maecenas nisl estDonec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est </p>
      </div>
    </div>
  </div>
</body>

So if you check the console, you will see what the heights of both divs are onLoad. Not sure how i can set the CSS through Javascript. Thank you in advance.
If any one has any other ideas on how to achieve this, i am open to suggestions.

Tags:

3

Answers


  1. 0

    if (textHeight > offsetHeight)

    offsetHeight is never defined. Do you mean offsetDivHeight?

    text.style.whiteSpace = 'nowrap'

    If you do this, all of the text in the div will be confined to one line.

    Demo with these changes made.

    Login or Signup to reply.
  2. 0

    Your if statement needs to use the variable name, offsetDivHeight.

    Login or Signup to reply.
  3. 0

    The solution is a bit tricky, since you cannot simply use textOverflow: ellipsis css property if your text has multiple lines.

    First we set height of the left text container to the height of the right which is smaller. Then we have to shrink the number of words displayed inside the left container. We remove words from the end of the container until container’s scrollHeight is smaller or equal to the container’s height.
    In this way we know that the container has only as much words as it’s able to display with restriction that it’s no taller than the right container.

    The drawback is that we remove overflowing words from the element so you’re no longer able to get original content from this container.

    function mounted() {
  var leftContainer = document.getElementById('overflow_text')
  var rightContainer = document.getElementById('offset_height')
  var rightOffsetHeight = rightContainer.offsetHeight;
  var leftOffsetHeight = leftContainer.offsetHeight;

  if (leftOffsetHeight > rightOffsetHeight) {
    leftContainer.style.height = rightOffsetHeight + "px"

    var wordArray = leftContainer.innerHTML.split(' ');
    while(leftContainer.scrollHeight > leftContainer.offsetHeight) {
        wordArray.pop();
        leftContainer.innerHTML = wordArray.join(' ') + '...';
     }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search