IE11: centered layout param not centering vertically
See original GitHub issueDescribe the bug
Stories center horizontally, but not vertically, in IE 11.
To Reproduce
- Enable the centered addon, and visit the story in IE 11.
Expected behavior
Vertical centering occurs.
Screenshots
The official storybook is not loading in IE 11.
My personal storybook is, showing the vertical entering bug:
Expected behavior (centering in Chrome is correct):
Code snippets
// preview.tsx
export const parameters = {
layout: 'centered',
};
System:
Please paste the results of npx sb@next info
here.
Environment Info:
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Binaries:
Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
Browsers:
Safari: 12.1.2
npmPackages:
@storybook/addon-actions: ^6.0.5 => 6.0.16
@storybook/addon-essentials: ^6.0.5 => 6.0.16
@storybook/addon-links: ^6.0.5 => 6.0.16
@storybook/addon-storyshots: ^6.0.12 => 6.0.16
@storybook/addon-storyshots-puppeteer: ^6.0.12 => 6.0.16
@storybook/addon-storysource: ^6.0.5 => 6.0.16
@storybook/addons: ^6.0.5 => 6.0.16
@storybook/react: ^6.0.5 => 6.0.16
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Flexbox Not Centering Vertically in IE - Stack Overflow
I found that ie browser have problem to vertically align inner containers, when only the min-height style is set or when height style...
Read more >XY Grid | Foundation for Sites 6 Docs
The XY grid is supported in Chrome, Firefox, Safari 6+, IE11, iOS 7+, and Android 4.4+. ... Block Grids are not available for...
Read more >A Complete Guide to CSS Grid
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Read more >Internet Explorer 11/Windows 7 No Vertical Center? - SitePoint
On this page, scroll down to where you see 'Contact Us' on the left with a map on the right. Contact Us is...
Read more >React Slider component - Material UI - MUI
By applying -webkit-appearance: slider-vertical; the slider is exposed as vertical. ... The slider's value label is not centered in IE 11.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@stefanprobst The scrollbar bug was captured in https://github.com/storybookjs/storybook/issues/13178#issuecomment-731274291 and https://github.com/storybookjs/storybook/pull/13192
i guess this can be closed again after #13192 was merged? thanks!