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.

Remove unneccessary scrollbar from iFrame

See original GitHub issue

Hi there,

we just added viewport to our storybook. Everything works fine except we always have a scrollbar in our stories.

At the moment, I believe this is because of the following line where scrolling is set to yes on the iframe tag:

https://github.com/storybookjs/storybook/blob/94dc910229992a78ddfecbd252edde321c184a2b/lib/ui/src/components/preview/iframe.tsx#L86

If I go to …/node_modules/@storybook/ui/dist/components/preview/iframe.js and change scrolling to no in the render function the scroll bar disappears:

return _react["default"].createElement(StyledIframe, _extends({
        scrolling: "no",
        id: id,
        title: title,
        src: src,
        allowFullScreen: allowFullScreen
      }, rest));

I can then easily define and control my desired scrolling behavior e.g. via a custom decorator in main.js if required.

Versions we use: “@storybook/preset-create-react-app”: “^1.5.2”, “@storybook/react”: “^5.3.19”, “@storybook/addon-viewport”: “^5.3.19”,

Any feedback on this issue would be much appreciated.

P.S. By the way, scrolling option on iframe is deprecated according to MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Issue Analytics

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

Top GitHub Comments

1reaction

shilmancommented, Aug 31, 2020

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.0 containing PR #12223 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

0reactions

albert-schillingcommented, Aug 24, 2020

@ndelangen Here is the tiny pull request: https://github.com/storybookjs/storybook/pull/12223

Top Results From Across the Web

Remove scrollbar from iframe - Stack Overflow

You can use the ::-webkit-scrollbar pseudo-element on the iframe's parent to get rid of those famous 90's scroll bars. ::-webkit-scrollbar { width: 0px;...

Scrollbars in iFrames - How to remove - Canvas Community

I am an ID student who is creating a course in Canvas for school. I'm having trouble removing horizontal and vertical scrollbars from...

How To Hide Scrollbars With CSS - W3Schools

How To Hide Scrollbars. Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example. body {

Remove scroll bar from iframe - HTMLHelp Forums

Hi All, Ok, what is the trick to removing the scroll bar from an iframe. HTML5 specs state that CSS should be used...

Removing vertical scrollbar in iframe - HTML & CSS - SitePoint

A simpler way is however, is to use a container div styled with overflow: hidden; to hide the scrollbar. Set the width and...