question-mark
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.

IE11: centered layout param not centering vertically

See original GitHub issue

Describe the bug

Stories center horizontally, but not vertically, in IE 11.

To Reproduce

  1. 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. Screen Shot 2020-09-04 at 10 15 55 AM

My personal storybook is, showing the vertical entering bug: Screen Shot 2020-09-04 at 10 34 00 AM

Expected behavior (centering in Chrome is correct): Screen Shot 2020-09-04 at 10 35 59 AM

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:closed
  • Created 3 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

0reactions
stefanprobstcommented, Nov 21, 2020

i guess this can be closed again after #13192 was merged? thanks!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found