quasarframework / quasar-ui-qcalendar

QCalendar - Quasar App Extension, Vue CLI plug-in and UMD distributions available
https://quasarframework.github.io/quasar-ui-qcalendar
MIT License
421 stars 116 forks source link

`QCalendarDay` slowly grows in width #385

Open septatrix opened 2 years ago

septatrix commented 2 years ago

Codesandbox to reproduce: https://codesandbox.io/s/affectionate-dhawan-fuu3yr?file=/src/pages/Index.vue

Describe the bug Under some weird conditions the component grows from its initial width to the maximal width permitted by the parent/CSS.

To Reproduce Steps to reproduce the behavior:

  1. Open the codesandbox link
  2. See the error

Expected behavior The component should have a fixed width and stay at that width

Desktop (please complete the following information):

hawkeye64 commented 2 years ago

Yes, I am aware of this. Thanks for the reproduction. I'll look into a way of resolving this when I have some extra time (which is severely limited right now)

septatrix commented 2 years ago

Have you thought about replacing all the inline styles (width/height) with a grid layout?

In the past I had a case where I could not figure out how to fix a similar problem (probably some annoying floating-points). After some time I gave up and refactored the styling to use a grid instead which was faster, did not have bugs and looked way more clean :D

hawkeye64 commented 2 years ago

I have thought about this. There is lots of work to be done, but I am plagued with back issues again and can barely sit in a chair.

wdmartins commented 1 month ago

Have anyone found a workaround for this issue?

hawkeye64 commented 2 weeks ago

Add a parent component (div) with a fixed height and width.