Размер встроенного фрейма динамически не изменяется на встроенной панели инструментов - PullRequest
Новая
       1

Размер встроенного фрейма динамически не изменяется на встроенной панели инструментов

4 голосов
/ 01 октября 2019

У нас есть панель инструментов Qucksight, которая отображается в пределах iframe 

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="3200px" overflow="auto" width="100%" frameborder="0"></iframe>

, если iframe отображается правильно, а также панель инструментов отображается. Теперь на самой панели инструментов есть несколько вкладок, тогда как каждая вкладка содержит разный контент разной длины.

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

enter image description here

Теперь я попытался установить высоту 100% и auto

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="100%" overflow="auto" width="100%" frameborder="0"></iframe>

, которые оба дали следующий результат

enter image description here

Что мне нужно сделать, чтобы информационные панели отображались в полную высоту, которая динамически регулируется при переключении вкладок?

ОБНОВЛЕНИЕ

Перенос iframe в 

<div height="100%" width="100%"><iframe...></iframe></div>

приводит к следующему

enter image description here

ОБНОВЛЕНИЕ 2

Добавление высоты в стиле следующим образом решает проблему 

<iframe src="..." style="height: 100vh; width: 100%; scrolling: no; frameborder: 0"></iframe>'

, но при этом создается двойная полоса прокрутки (одна для фактического фрейма и другая для страницы)

enter image description here

Ответы [ 6 ]

3 голосов
/ 04 октября 2019

Вы можете использовать Amazon QuickSight JavaScript SDK для создания следующих iframes:

https://www.npmjs.com/package/amazon-quicksight-embedding-sdk

И установить для параметра height значение AutoFit для автоматического масштабирования на основе фактической высоты содержимого панели мониторинга.

Пример: 

height: "AutoFit",
loadingHeight: '700px',
2 голосов
/ 08 октября 2019

Удаление переполнения из тела страницы отключит прокрутку. Если ваш iframe занимает весь экран, как кажется, просто добавьте «overflow: hidden;»;в теле страницы. 

body {
    overflow: hidden;
}

Проверьте, применяется ли свойство, потому что если вы используете какой-либо шаблон начальной загрузки, он может перезаписать переполнение: скрыто. В этом случае просто добавьте "! Important" в CSS.

Удачи!

0 голосов
/ 10 октября 2019

Я думаю, это поможет вам 

<body style="margin: 0;overflow: hidden;height: 100vh;">
      <iframe src="..." style="height: 100%;width: 100%;border: 0;"></iframe>
</body>
0 голосов
/ 04 октября 2019

Я попробовал следующее, и это сработало!

HTML 

<iframe src="..."></iframe>

... необходимо заменить URL-адресом

CSS 

iframe {
    width: 100%;
    height: 100vh;
}

В CSS height из iframe устанавливается равным 100% высоты области просмотра. (AKA: высота окна)

Примечания:

  • vh - это единица измерения CSS для высоты области просмотра. (высота окна)
  • Вы можете добавить любое другое свойство в iframe.
  • height должен быть установлен в CSS, в другом файле или в style тегах
  • значение vh может быть установлено выше 100 для большего пространства

Надеюсь, это решит вашу проблему.

Спасибо

0 голосов
/ 03 октября 2019

Положить iframe внутри div с высотой, установленной на 100%, должно работать. Я пробовал это раньше. 

<div height="100%>
<iframe>...</iframe>
</div>

Спасибо.

0 голосов
/ 01 октября 2019

Вы можете попробовать обернуть свой iframe в Div и применить к iframe высоту и ширину 100%.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...