CODEWITHSUNDEEP
css
haavardnj
haavardnj

Reputation: 11

Fill remaining space by increasing font

I have an issue where I want to fill the remaining (very dynamic) space of the box by increasing (and decreasing) the font size as much as possible.

http://jsfiddle.net/urqL1evn/2

Right now, all i have is:

.textbox {
  margin: 0 5em;
  margin-top: 0.5em;
  width: 80%;
  font-size: 30px;
  white-space: pre-wrap;
}

The page will be viewed on a 1920x1080 50" TV with 100% windows scaling.

I will add and remove sections to the point where there will only be one on the screen and maximum 4.

Any help is very appreciated!

Upvotes: 0

Views: 347

Answers (1)

user7289982
user7289982

Reputation:

Here is solution for your problem: 

$(document).ready(function() {
    $('.textbox').each(function() {
        let that = $(this),
            textBoxHeight = parseInt(that.height()) + 20, // +20 its sum of margin-top + margin-bottom  of .textbox element
            parentHeight = parseInt(that.parent().height()),
            fontSize = parseInt(that.css('font-size'))

        while(textBoxHeight > parentHeight)
        {
            fontSize -= 1
            that.css({'font-size':fontSize+'px'})
            textBoxHeight = parseInt(that.height()) + 20 // +20 its sum of margin-top + margin-bottom of .textbox element
        }
    })
})

http://jsfiddle.net/urqL1evn/21/

CSS has changed (margin in em > px)

.textbox {
    margin: 10px 20px;
    width: 80%;
    font-size: 100px;
    white-space: pre-wrap;
}

So you need to set .textbox font-size to 100px and then in JS we're lowering it down all the time until height of .textbox element is not equal or lower than it's parent element. It's very simple and it works just fine.

I hope this is answer for your question.

Don't forget to use jQuery library.

Upvotes: 1

Related Questions