topic iframe in a tab does not take the full height in Calcite Design System Questions

iframe in a tab does not take the full height

yushang — Mon, 19 Feb 2024 10:42:01 GMT

Hi guys,

I'm putting an iframe in a tab as follow. What I expected is that the iframe will take the full height of the tab, but it does not. How does this happen? Or is there any work arround? Many thanks.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="module" src="https://js.arcgis.com/calcite-components/2.4.0/calcite.esm.js"></script> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.4.0/calcite.css" /> <style> calcite-shell { border:1px solid red; } iframe { width:100%; height:100%; border:0px; } </style> </head> <body> <calcite-shell> <calcite-tabs> <calcite-tab-nav slot="title-group"> <calcite-tab-title>Home</calcite-tab-title> </calcite-tab-nav> <calcite-tab> <iframe src='http://bing.com'></iframe> </calcite-tab> </calcite-tabs> </calcite-shell> </body> </html>

Re: iframe in a tab does not take the full height

Mac_And_Cheese — Mon, 19 Feb 2024 18:45:43 GMT

Hi @yushang - to achieve this, you can set height: 100% on the Tabs component.

If desired, you can use the --calcite-tab-content-block-padding to adjust the Tab component's default block-padding:

calcite-tabs { height: 100%; --calcite-tab-content-block-padding: 0; }

Example in Codepen

Re: iframe in a tab does not take the full height

yushang — Tue, 20 Feb 2024 00:04:34 GMT

it works! thank you.