Vuetify: [Bug Report] [v-calendar] Calendar is not rendering correctly on Safari if fixed height is not provided

Created on 3 Oct 2019  路  3Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.1.0
Last working version: 1.5.18
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Mac OS 10.14.5

Steps to reproduce

Create v-calendar, add some events, and remove fixed height of a root element (for ex. remove "height" from v-sheet". (MONTH view)

Expected Behavior

v-calendar should render normally with minimum height as its content (Events and so) required. (Same as in Chrome)

Actual Behavior

Whole month view is rendered over itself and unreadable, unlike in Chrome.

Reproduction Link

https://codepen.io/GeorgeZizka/pen/JjjPYzr?&editable=true&editors=101

VCalendar triage

Most helpful comment

I ended up fixing this with:

.v-calendar-weekly__week {
height: unset;
}

All 3 comments

Chrome:
image

Safari:
image

I ended up fixing this with:

.v-calendar-weekly__week {
height: unset;
}

Thank you for the information!

Was this page helpful?
0 / 5 - 0 ratings