Content does not automatically center in IE11
See original GitHub issueI know, why do people still use it, but some insist on maintaining backward compatibility with IE. By default, jsPsych didn’t center the content for me, so I had to add these styles:
.jspsych-content-wrapper {
min-height: 100vh;
min-width: 100vw;
display: -ms-flexbox;
-ms-flex-direction: column;
}
#jspsych-content {
-ms-flex-grow: 1
}
maybe add these by default? They do not appear to be disruptive for other browsers.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
internet explorer - Flexbox Not Centering Vertically in IE
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 >IE11: align-items: center with min-height workaround #231
Workaround: Setting height to a value less then min-height fixes the align-items: center issue in IE11, but the container still sets its size ......
Read more >Internet Explorer Hacks
Internet Explorer doesn't play nice. In this article I will cover the most common IE bugs that I've encountered and the solutions I...
Read more >CSS Flex helpers
IE11 does not properly support auto margins on flex items that have a parent with a non-default justify-content value.
Read more >15 ways to implement vertical alignment with CSS
1. Absolute positioning and margin: auto. An element with no intrinsic size can be centered by simply using equal values from the top...
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
This is great. I made one minor change about mobile browser support to add some clarification. I think it’s good to go!
I added a draft page called “Browser and Device Support” in the docs-6.2 branch here: https://github.com/jspsych/jsPsych/blob/docs-6.2/docs/overview/browser-device-support.md Please feel free to edit!