Resizing the preview iframe

[seniorquico]

Is there an available method to style or resize the preview iframe?

I would like to preview my components at various "screen sizes" to test some responsive CSS rulesets. Right now, I have to go fullscreen and resize the browser or enable the device mode using Chrome/Safari devtools. I could see making the testing workflow for a scenario like this much easier if the navigation menu could remain visible and the preview iframe just changed in size.

I tried out the third-party addon storybook-host, but it creates/styles a div inside the preview iframe, skipping the responsive CSS rulesets.

[Hypnosphi]

Have you tried this?

[seniorquico]

@Hypnosphi Did you intend to include a link or reference?

[usulpro]

@seniorquico It's default behavior of Storybook UI

[Hypnosphi]

@seniorquico please click on "Have you tried this?" above

[seniorquico]

@Hypnosphi Weird, the expanding block doesn't work on Chrome 60 on my Win10 touch device. Got it on my phone.

Yes. I can resize the pane manually and observe the responsive changes. That's what I've been doing up to now. Having to test at multiple viewport sizes, I found the select menu with pre-defined options in the device mode of Chrome/Safari devtools much easier than manually resizing. However, that approach only works if I go into fullscreen.

What I was hoping to find was a mechanism to pre-define viewport sizes to quickly switch and test the responsive CSS rulesets. storybook-host was the closest I could find, but it fails to work for my scenario as it decorates the content of the iframe.

Having continued my Google search and digging just a bit around the code, I think I've approached the conclusion that this isn't currently achievable. But, would it be possible to create an addon that optionally applies margin around the iframe element from the manager app side?

On a related side note, Sizzy looks like an interesting tool. I had some issues with scroll bars appearing unnecessarily, and it still suffers the same fullscreen limitation as testing with device mode in Chrome/Safari devtools.

[ndelangen]

We have a topic on our roadmap to create tooling inside storybook (via addons) that mimic Sizzy's behavior, and make it easy to send links to real mobile devices to view the selected story in a variety of screen-sizes etc.

If you would want to work with us to create it 🙇 that'd be awesome!

[saponifi3d]

@ndelangen I recently ran into this issue as well, and created a quick addon to help solve the problem.

if you guys are interested, i'd love to cleaning up the action area, add more mobile sizes (maybe a handle to make responsive), and contrib back to the storybook addons :D

[seniorquico]

@saponifi3d That looks awesome! Please let me know if there's anyway I can help toward an effort to release your addon to the community.

@ndelangen Sending "fullscreen" links to a mobile device also sounds like an awesome feature. Are there any requirements or use cases drawn up? I'm definitely willing to help contribute.

[ndelangen]

@seniorquico Come join us on Slack so we can communicate efficiently on what, when and how we're planning to add the feature.

Full disclosure: there hasn't been any work put into this except the description on our Roadmap

[stale]

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. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!