DocsPage: how to change canvas height without mdx?

[krutoo]

Hi. How can i change iframe height in docs page for specific story without mdx?

Currently all iframes with stories in docs page has height 100px

[gdorsi]

I've had a similar issue to yours and I've solved the problem by using the story parameters:

export default {
    title: 'Components/Dialog',
    component: Dialog,
    parameters: {
        layout: 'centered',
        docs: { page: Docs, inlineStories: false, iframeHeight: 600 },
    },
}

I think that would work also with component or global parameters but I haven't tried it.

[krutoo]

@gdorsi Thank you, really. But where you find its in docs?

[shilman]

It's documented here https://github.com/storybookjs/storybook/blob/master/addons/docs/common/README.md#L67

@jonniebigodes At some point soon we need to find a way to get the relevant docs out of the addon-docs README files and into the main documentation.

[kasparsuvi1]

As from Storybook v7 use iframeHeight and inlineStories with new types:

export default {
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 700,
      },
    },
  },
} as Meta;

[adnanhamzeh]

@kasparsuvi1 it seems this is causing the source code not to render as expected when you click "Show code". If you remove the inline prop it renders normally again.

[nathanpower]

As from Storybook v7 use iframeHeight and inlineStories with new types:

This should probably be in the migration docs

[jkillian]

If you are using inline stories, something like this works to change story height in docs:

export default {
  parameters: {
    docs: {
      story: {
        height: '700px',
      },
    },
  },
}