In my current setup, I have two separate divs on the left and right sides. The issue arises when the height of the left div exceeds the height of the right div. In such cases, the function adjusts the heights to be equal and hides any excess text in the left div. While this solution works well in general, the problem arises when I resize the window or test the layout on different screen sizes. The height of the left div gets messed up and does not revert to its original state as expected.
For a visual demonstration of the issue, you can visit this link. Simply switch between various screen sizes and exit responsive mode to observe the problem.
var leftContainer = document.getElementById('overflow_text')
var rightContainer = document.getElementById('offset_height')
var readToggle = document.getElementById('toggle_text')
var elem = document.querySelector('.readMore')
var fullText = elem.textContent;
var truncated = false;
var rightOffsetHeight = rightContainer.offsetHeight;
var leftOffsetHeight = leftContainer.offsetHeight;
console.log(leftOffsetHeight)
console.log(rightOffsetHeight)
function mounted() {
if (leftOffsetHeight > rightOffsetHeight) {
leftContainer.style.height = rightOffsetHeight + "px"
readToggle.style.display = 'block'
readToggle.innerHTML = 'Read More'
while (leftContainer.scrollHeight > leftContainer.offsetHeight) {
var wordArray = leftContainer.innerHTML.split(' ');
wordArray.pop();
leftContainer.innerHTML = wordArray.join(' ') + '...';
truncated = true
}
} else {
readToggle.style.display = 'none'
}
}
function showText() {
if (truncated) {
leftContainer.innerHTML = fullText
leftContainer.style.height = 'auto'
readToggle.innerHTML = 'Read Less'
readToggle.style.position = 'relative'
truncated = false
} else {
leftContainer.style.height = rightOffsetHeight + "px"
while (leftContainer.scrollHeight > leftContainer.offsetHeight) {
var wordArray = leftContainer.innerHTML.split(' ');
wordArray.pop();
leftContainer.innerHTML = wordArray.join(' ') + '...';
readToggle.innerHTML = 'Read More'
truncated = true
}
}
}
function watchSize() {
var w = window.outerWidth;
var h = window.outerHeight;
console.log(w)
console.log(h)
}
#toggle_text {
cursor: pointer;
}
#offset_height {
font-size: 16px;
}
<body onLoad='mounted()' onresize='watchSize()'>
<p id="demo"></p>
<div class="container">
<div class="row">
<div class="col-md-6">
<p id='overflow_text' class="readMore">Lorem ipsum dolor sit amet... // The rest of the HTML code is intact but omitted for brevity.
If anyone has a solution to address this issue, I would greatly appreciate it. Thank you in advance.