storybook 当面板大小超过视口高度时,面板不可见,

piwo6bdm  于 3个月前  发布在  其他
关注(0)|答案(1)|浏览(43)

描述bug

我们正在使用控件插件。当我们有大量渲染的控件时,面板在没有垂直空间后就不再显示了。我们只能看到预览,而面板被隐藏在其后面,但由于z-index较低(不存在),所以不可见。
storybook/lib/ui/src/components/layout/container.tsx
第139行 1e97c26
| | exportconstPanel: FunctionComponent<{ |

重现问题

我发现只有一个一致的方法来重现这个bug。

  1. 通过拖动将其高度增加到顶部
  2. 缩小浏览器窗口,使面板“溢出”预览
  3. 重新加载浏览器
  4. 想知道面板去哪了
  5. 增加浏览器窗口的高度
  6. 再次看到你的面板

预期行为

让面板始终可见。

截图

如果适用,请添加截图以帮助解释您的问题。

代码片段

如果适用,请添加代码示例以帮助解释您的问题。

附加信息

为什么这是一个问题?我想面板的高度存储在本地存储中。因为我们将storybook嵌入到样式指南中,那里可用的视口比浏览器窗口小得多。如果有人访问我们的storybook应用程序并拖动面板(高度存储在本地存储中),然后访问样式指南,其中相同的故事正在加载iframe中,那么面板的高度太大,因此无法在样式指南中渲染。
至少这是我想象发生的情况。

i5desfxk

i5desfxk1#

作为临时解决方案,我将删除.storybook/preview.js

localStorage.removeItem('storybook-layout');

中的本地存储条目。

相关问题