Bulma: Modal component & IE11, horizontally not centred and aligned to right of screen

Created on 12 Jan 2017 · 11Comments · Source: jgthms/bulma

Seems to be caused by this:

https://github.com/jgthms/bulma/blob/master/sass/components/modal.sass#L14

// works
margin: 0 
// breaks
margin: 0 auto

At a glance, it causes no adverse effect having the auto removed in Chrome.

If you think it won't break anything, happy to send in PR or whatever.

browser bug bulma pinned

Source

DimitarChristoff

👍11

Most helpful comment

There's an easy fix for this:

.modal {
  flex-direction: column;
}

I hope it can be added to the core, because it's the only bug I've run into with IE11 so far.

Reference:
https://stackoverflow.com/questions/29270465/why-doesnt-justify-content-center-work-in-ie

richardtallent on 19 Apr 2018

👍9

All 11 comments

Actually I've already PRed as #289 but got ignored somehow.
I'm wondering if there is any side effect that I didn't notice.

c-cho on 13 Jan 2017

👍2

I used this code to fix the issue on IE without impacting the other browsers

@media screen and (min-width: 769px) { .modal-content { margin: 0 20px !important; } }

barohatoum on 14 Jan 2017

👍2

Note that this is a problem with .modal-card as well, not just .modal-content.

@jgthms, I see that you closed #289 as 'invalid or duplicate'. Is there something else that needs to be changed to get this fix in?

wolfgang42 on 22 Mar 2017

it is both - https://github.com/jgthms/bulma/blob/master/sass/components/modal.sass#L5-L6
the real question is, does bulma have the goal of supporting IE11 at all?

DimitarChristoff on 22 Mar 2017

@DimitarChristoff The readme says Browser Support is IE 10+.

wolfgang42 on 22 Mar 2017

@wolfgang42 yes, but there is a difference between 'it works in IE10+ as a side effect if it follows standards, best effort basis' and 'we make sure it works in IE10 even if it means changing code to cater for edge cases'. the original bug is nearly an year old now, seems like it's not a priority.

DimitarChristoff on 23 Mar 2017

@barohatoum Your code works like a charm, thanks so much!

jruizsulime on 22 Feb 2018

If legacy fixes like this won't be put into the code, maybe the next best thing is to add a page to the documentation explaining issues and work-arounds.