Automatically-adjusted font size in liquid container Play Framework

Question

I'm developing an web-app in the Play Framework and at the moment I would like to make the entire app able to adjust sizes of containers and text according to the browser's size. I have managed to make the containers adjust and it works fine, but I'm stuck on adjusting the font-size to fill up the container's size. Even though I tried several variants already, it doesn't seem to work at all: when the text is too big for the container, it simply passes it to a new line in the #indexPerson container, instead of adjusting the font. I also tried setting "white-space: nowrap", but this causes a scrollbar to show up, and the font still doesn't adjust itself. Adding "overflow:hidden" simply hides part of the text, no font-size adjustment whatsoever. Is there something I'm missing out? Thanks a lot in advance! I'm using the textFit plugin: http://www.jqueryscript.net/text/jQuery-Plugin-For-Fitting-Text-To-Its-Container-textFit.html. My css file looks like this:

div#outer {
width:100%;
height:100%;
}

div#indexPerson {
width:100%;
height:6%;
float:left;
border: 2px #385D8A solid;
background-color:#B9CDE5;
border-radius:20px;
-moz-border-radius:20px;
padding-top:2px;
font-size:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

And the index page is:

@(people: List[Client])

<!DOCTYPE html>
<html>
    <head>
        <title>My app</title>       
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/index.css")">
        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("javascripts/textFit.slow.js")" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                textFit(document.getElementById('indexPerson'), {maxFontSize: 36}); 
            });
            $(window).resize(function()) {
                textFit(document.getElementById('indexPerson'), {maxFontSize: 36}); 
            });
         </script>
    </head>
    <body>
         <div id="outer">
            @for(person <- people) {
                <a href="@{routes.Application.login_form(person.getId())}">
                <div id="indexPerson">
                    @person.getInfo()
                 </div>
            </a>
            }
        </div>
    </body>
</html>

Here are two good reads regarding your topic:http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container and: http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-in-my-css — Nico O, Feb 16 '14 at 14:19
Thanks a lot! I managed to make it work for the first element in the people list. The rest still stays the initial size, doesn't adapt. What can be wrong with it? Normally the loop should first generate all the divs, and the script should be called only at the end. But it seems it only gets called after the first iteration. — franciscb, Feb 16 '14 at 15:56

score 0 · Accepted Answer · answered Feb 20 '14 at 20:48

0

Solved it! Note to self: always make sure the div ids are unique!

answered Feb 20 '14 at 20:48

franciscb

115
1
9

Automatically-adjusted font size in liquid container Play Framework

1 Answers1