iframe in a tab does not take the full height

yushang · ‎02-19-2024

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>

Mac_And_Cheese · ‎02-19-2024

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

View solution in original post

Mac_And_Cheese · ‎02-19-2024

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

yushang · ‎02-19-2024

it works! thank you.