Автоматически корректируемый размер шрифта в контейнере для жидкости Play Framework

Question

Автоматически корректируемый размер шрифта в контейнере для жидкости Play Framework

0

Я разрабатываю веб-приложение в Play Framework, и на данный момент я хочу, чтобы все приложение могло настраивать размеры контейнеров и текста в зависимости от размера браузера. Мне удалось настроить контейнеры, и он отлично работает, но я застрял в настройке размера шрифта, чтобы заполнить размер контейнера. Несмотря на то, что я уже пробовал несколько вариантов, он вообще не работает: когда текст слишком большой для контейнера, он просто передает его в новую строку в контейнере #indexPerson вместо настройки шрифта. Я также попытался установить "white-space: nowrap", но это вызывает появление полосы прокрутки, и шрифт по-прежнему не корректирует себя. Добавление "переполнения: скрытое" просто скрывает часть текста, без изменения размера шрифта. Я что-то упускаю? Заранее большое спасибо! Я использую плагин textFit: http://www.jqueryscript.net/text/jQuery-Plugin-For-Fitting-Text-To-Its-Container-textFit.html. Мой файл css выглядит так:

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;
}

И индексная страница:

@(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>

franciscb 16 фев. 2014, в 14:51

Источник

0

Вот две хорошие статьи по вашей теме: stackoverflow.com/questions/687998/… и: stackoverflow.com/questions/11799236/…
Nico O 16 фев. 2014, в 14:19
0

Большое спасибо! Мне удалось заставить это работать для первого элемента в списке людей. Остальное все равно остается в исходном размере, не адаптируется. Что может быть не так с этим? Обычно цикл должен сначала генерировать все div, и скрипт должен вызываться только в конце. Но, похоже, он вызывается только после первой итерации.
franciscb 16 фев. 2014, в 15:56

Теги:

javascript

jquery

html

css

playframework

1 ответ

Ещё вопросы

Вот две хорошие статьи по вашей теме: stackoverflow.com/questions/687998/… и: stackoverflow.com/questions/11799236/…
Большое спасибо! Мне удалось заставить это работать для первого элемента в списке людей. Остальное все равно остается в исходном размере, не адаптируется. Что может быть не так с этим? Обычно цикл должен сначала генерировать все div, и скрипт должен вызываться только в конце. Но, похоже, он вызывается только после первой итерации.

franciscb · Accepted Answer · 2014-02-20T18-22-00.000Z

Решила! Примечание для себя: всегда удостоверяйтесь, что идентификаторы уникальны!