Currently I am creating a slideshow like many websites use to display promotions on the top of their screen but instead of images I am displaying text. One of the problems that I am having is resizing the content if there is too much text or if the user formatted it in a way that contained a lot of enters. There is also word wrapping. I currently found a solution that partially works by grabbing the client height after it finished rendering everything as shown
decreaseFont() {
if(!(document.getElementById('postMessage') === null)){
this.sizeFont = parseInt(window.getComputedStyle(document.getElementById('postMessage')).fontSize.substring(0,2));
document.getElementById('postMessage').style.fontSize = this.sizeFont.toString() + 'px';
while (document.getElementById('changeHeight').clientHeight > 675) {
this.sizeFont--;
document.getElementById('postMessage').style.fontSize = this.sizeFont.toString() + 'px';
[...]
}
}
}
This is able to resize the window but, It has some strange side effects that i cant figure out. One of them is that clientheight retrieves a slightly smaller value than normal sometimes and I am unable to figure out why. Another is that, while i can place the method in an ngAfter view checked method this get constantly called and it will still attempt to use the font size of the previous post due to the html not really changing just the content. I was wondering what your guys approach would be.
While this is an extreme example it kinda shows what im talking about. This is without any resize but I can force it to work right now.
