Настройка ширины CSS не работает с графиками Flot в @media print - PullRequest
Новая
       18

Настройка ширины CSS не работает с графиками Flot в @media print

1 голос
/ 20 июня 2011

У меня есть экран, который довольно счастливо отображает два графика с плавающей точкой.

Я хочу иметь возможность печатать графики, поэтому я настроил условие @media print с помощью CSS следующим образом:

@ медиаэкран { div.plot { плыть налево; семейство шрифтов: arial; ширина: 575 пикселей; высота: 300 пикселей; } }

@ media print { div.plot { плыть налево; семейство шрифтов: arial; ширина: 300 пикселей; высота: 300 пикселей; } }

Мой HTML выглядит так: 

        <div id="graph" class="plot"></div>
        <div class="plot" style="width:50px"></div>
        <div id="graph2" class="plot"></div><p></p>

Насколько я вижу, печатная версия должна создавать два графика, каждый шириной 300 пикселей.

Что происходит, так это то, что я получаю два графика, которые все еще имеют большую ширину в 575 пикселей, которые затем сталкиваются друг с другом.

Правильно ли я понимаю, что CSS width контролирует правильную ширину графиков, или мне нужно использовать другой элемент управления CSS, чтобы фиксировать ширину графиков?

Ответы [ 2 ]

1 голос
/ 21 июня 2011

Вероятно, ваша проблема в том, что когда вы вызываете $.plot, он создает элементы canvas внутри вашего заполнителя #graph. Эти элементы холста используют размер вашего заполнителя, , когда plot называется , чтобы установить собственную ширину и высоту. Когда вы нажимаете «Печать», это меняет таблицу стилей на версию для печати, но вам также нужно будет повторно вызвать $.plot или использовать плагин flot resize .

0 голосов
/ 20 июня 2011

эта работа идеально подходит для меня: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test </title>
    <style type="text/css" media="screen">
    div.plot { float: left; font-family: arial; width: 575px; height: 300px;border:1px solid red; }
    </style>
    <style type="text/css" media="print">
    div.plot { float: left; font-family: arial; width: 300px; height: 300px;border:1px solid red; }
    </style>
</head>
<body>
    <div id="graph" class="plot"></div>
    <div class="plot" style="width:50px"></div>
    <div id="graph2" class="plot"></div><p></p>
</body>
</html>

Ваша ошибка, вероятно, заключается в том, где / как вы определили @media print.

В противном случае это может быть ваша div id = "graph / 2" , которая вызывает проблему ... (если у вас есть img, который слишком велик, например) (попробуйте добавить overflow:hidden!)

PS: для простого переключения между media и print css я использую панель инструментов веб-разработчика .

...