Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook 6.0: viewport not being set on initial load

See original GitHub issue

Describe the bug Viewport is not set on. the story on initial load:

https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-viewport-custom-default-kindle-fire-2--overridden-via-with-viewport-parameterized-decorator

To Reproduce Steps to reproduce the behavior:

Go to link
see the viewport not being set

Expected behavior I expect viewport addon to set proper viewport

Screenshots Screen Shot 2020-07-14 at 7 32 18 PM

Code snippets

  viewport: {
    viewports: {
      mobile: {
        name: 'Mobile',
        styles: {
          width: '360px',
          height: '640px',
        },
        type: 'mobile',
      },
    },
    defaultViewport: 'mobile',
  },

System: Please paste the results of npx -p @storybook/cli@next sb info here.

Additional context Add any other context about the problem here.

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:8 (6 by maintainers)

Top GitHub Comments

3reactions

shilmancommented, Oct 15, 2020

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.24 containing PR #11627 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

2reactions

ndelangencommented, Oct 13, 2020

yeah, should be good

Top Results From Across the Web

Viewport - Storybook - JS.ORG

Watch a video tutorial on the Storybook channel. The Viewport toolbar item allows you to adjust the dimensions of the iframe your story...

Storybook's viewport-addon not showing ... - Stack Overflow

Please try to configure a default viewPort and then, for e.g. from Storybook ref.. // MyComponent.stories.js | MyComponent.stories.ts | ...

@storybook/addon-viewport | Yarn - Package Manager

Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of ......

Configuring Storybook: 6 Tips You Can't Miss | by Zheng Li

How to configure your Storybook to be integrated with a current project ... addons by default, including Docs, Controls, Actions, Viewport, ...

Generic Storybook stories with different viewports

You may enjoy the default set up and manually change the viewport settings when developing or checking documentation of the components.