React-calendar: Broken layout in IE11

[larsnystrom]

The layout is broken in IE11:

Compared to Chrome:

Right now I'm unsure if (1) the problem is on my end, or (2) if it's because of the quirky flexbox implementation in IE11, or (3) if you're not supporting IE?

Can I remove the standard stylesheet somehow so I can style it myself?

[wojtekmaj]

Hello,
I do support IE11. This might be a bug on our or your side. I'm unable to test it at the moment. I see you're using custom styles, maybe you're missing something like container width?

[larsnystrom]

The only style I've added is:

.panel-body > .react-calendar {
    border: 0;
    width: 100%;
}

That is to make react-calendar expand to use the entire width of the panel-body (I'm using bootstrap 3) and also to remove the default border.

[PiTomar]

Hello,
I’ve implemented the calendar today in a new project an observed the same behaviour.
In Chrome everything is ok but in IE11 the date-items flow over the calendar borders.
Maybe some bug with the percentage calculation of the flex-basis?

E.g. the Buttons for the day-items have a style "flex-basis: 14.2...%;"
In Chrome this is displayed about 20px and in IE 66px.

Chrome:

IE:

[wojtekmaj]

Hello,
I've been facing some environment issues after switching machines, I'll look into this ASAP.

[wojtekmaj]

Thank you for your patience. The issue has been fixed and will be public in incoming version v2.13.2.

[PiTomar]

Thanks for your fast response.
Now the Items are in the calendar but on my test environment still not on the right place. The day-items seems to big so the new-line-break is at the wrong place. (3 and 4 should be under Saturday/ Sunday)
Or is there any fixed width the calendar must have? (in Chrome it works with any width)

[lisahoong]

I am experiencing a similar issue with mobile view in chrome

[nathan-haines]

@PiTomar did you ever determine how to fix this? Running into the same issue

[PiTomar]

@nathan-haines Please see issue #45 "Broken layout in Safari mobile". There we currently also discus the IE11 positioning issue.
As temporary workaround, you can try to remove some margins/ paddings of the '.react-calendar button' items.