Storybook: How to expand to the full height of the story

[andrespch]

I'm having problems trying to accomplish something that should be quite simple, I wanna have a container in my story that expands to the full height of the story "canvas" I'm trying setting the style of this container component like flex:1 but it doesn't work, I'm using storybook-addon-scissors to set the size of my story and I would like the content of my story to adapt as I change its container size. This container component Instead of expanding like expected with flex: 1 it just expands according to the content inside it.

Thanks in advance to anyone that can shed some light here.

[Hypnosphi]

flex: 1 is a flexbox children property, in can be used only for children of flexbox container (an element with display: flex or display: inline-flex.

You can try this:

1. Add .storybook/preview-head.html file with following content to reset default body margins:

html <style> body { margin: 0; } </style>

1. In your container, use height: 100vh (vh stands for "viewport height")

[andrespch]

Thanks a lot @Hypnosphi, that helped me a lot, may I ask how did you find out about preview_head.html? I would like to learn more about the internals and other possibilities to costumize the stories, like right now I wanna remove the padding of one of the divs with the Pane1

[Hypnosphi]

how did you find out about preview_head.html

https://storybook.js.org/configurations/add-custom-head-tags/

Oh, actually it's preview-head.html (with dash), I'll edit my initial comment

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[jackblackCH]

A simple and still customizable plugin like solution via a decorator. We inject a style tag that overrides the body class in the iframe.

1. Add file to .storybook/addons/no-border.js -> export default story => <style>.sb-show-main{margin: 0}</style>${story()}

2. In the story

import { storiesOf } from '@storybook/html'; // or react
import noBorder from '<path_back_to_root>.storybook/addons/no-border';

storiesOf('MyStory', module)
  .addDecorator(noBorder)
...

[davoam]

In my story template I've just added the following container with height: 100vh

Example:

<div style="height: 100vh">
    <storybook-component-which-need-full-height></storybook-component-which-need-full-height>
</div>

[esbenvb]

What I did to make it work with these versions:

"@storybook/react": "^5.3.19"
"react": "^16.13.1",
"react-dom": "^16.13.1",

1. Add .storybook/preview-head.html file with following content to reset default body margins:

<style>
  body {
    margin: 0;
  }
</style>

1. Add a decorator in .storybook/decorators.js:

import React from "react";

export const fullScreen = (story) => (
  <div style={{ height: "100vh" }}>{story()}</div>
);

1. Use the decorator

import { fullScreen } from "../../.storybook/decorators";

storiesOf("GenericMessage", module)
  .addDecorator(fullScreen)
  .add("default", () => (
      <GenericMessage
        ......
      />  
  ));

[unframework]

Just as an FYI for anyone reading this later - if you are using the newer Storybook format (where stories are defined as simple exports, aka CSF) you can set the following in your story file's default export to remove body margins:

export default {
  parameters: {
    layout: 'fullscreen'
  }
};

However, this will not set your root div to be height: 100%. You will still need to use the 100vh decorator for that.