Сегодня хочу рассказать немного о встраивании диаграмм Qlik Sense в мэшапах, а именно о корректном отображении подсказок на диаграммах при отображении на сайте. Так бывает, что при прокручивании страницы вниз, всплывающая подсказка отображается не корректно на листе (пример ниже). Далее расскажу, как избежать этой проблемы.
Решение
Самый простой способ решения это задачи – нужно добавить пару строк в CSS-файл, установив высоту объекта на 100%:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
html, body { height: 100%; overflow: hidden; } body { overflow: auto; } |
Далее добавляем еще несколько строк кода для корректного отображения диаграммы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<head> <style> html, body, #page-content { height: 100%; overflow: hidden; } #page-content { overflow: auto; } </style> </head> <body> <div id="page-content"> <!-- All of your content --> </div> </body> |
Также есть и другие сложности – например, корректное соблюдение отображения диаграммы, согласно изначально заданному стилю:
Для этого установим правильные отступы от границ через тот же файл CSS:
1 2 3 4 5 6 7 |
.qv-chart-tooltip-inner .row { margin-left: 0; margin-right: 0; } |
Теперь все должно работать корректно. Отличных вам разработок с Qlik Sense!
Источник: Qlik Community
Свежие комментарии