Calendar repositions it's months after first render

[Suntechnick]

Using the official example from codepen: https://codepen.io/Paul-DS/pen/wOpyNq

After the initial render for a few moments calendar is displayed like this:

And then it rerenders to desired result:

Is there any way to avoid this transition?

[nistadev]

Same happens to me. Any solutions?

[Suntechnick]

I changed CSS month positioning to use display: flex and this problem is gone for now. It could break something else however.

[nistadev]

@Suntechnick which CSS selector for the month you used? can you share the code?

[Suntechnick]

.calendar .months-container { display: flex !important; flex-flow: row wrap !important; justify-content: center !important; } .calendar .months-container .month-container { height: auto !important; padding: 0 !important; } .calendar .months-container .month-container { flex: 1 1 0 !important; } .calendar .months-container .month-container.month-2 { width: auto !important; } .calendar .months-container .month-container.month-3 { width: auto !important; } .calendar .months-container .month-container.month-4 { width: auto !important; } .calendar .months-container .month-container.month-6 { width: auto !important; } .calendar .months-container .month-container.month-12 { width: auto !important; }

Something like that should do it. Include these on top of the library styles.
Be aware that this changes default positioning behaviour so I can't really recommend this solution.