Resource timeline view grid doesn't line up on wide screens in Chrome
mchapman opened this issue · 8 comments
Please see https://codepen.io/anon/pen/pYWYBg (probably only visible on a 4k screen maximised window)
Towards the end of the day you get problems like this:
Confirmed on dual monitors, with 3840px width.
Thanks for the report. I can see the issue in Chrome on a smaller screen by zooming out to 25%, but don't see the issue in Firefox. Are you also using Chrome?
Setting the slotWidth to any string seems to fix the issue. Looking at this now to see if I can figure out the issue.
edit: Just kidding, that's not a solid temp fix. Looks like the issue is if slotWidth*slots < the width of the container. If really necessary for now, you should be able to set the slotWidth = containerWidth/slots and reinitialize when the window is resized.
I had a similar problem due to a custom css rule that I have added
.fc-head {
font-size: 10px;
}
Removing this has fixed the issue.
i can also repro this if i zoom out a lot on Chrome
I noticed something which seems to cause this issue:
The width of the header cells seems to be regulated by a <colgroup> element which contains one <col> element for each slot.
In v3, with standard settings (one slot = 30 minutes, 24 hours displayed, so 48 slots in total),
there is one <col> element with a set width for each slot, except the last one which has no width (so the last slots simply takes up all available space):
<colgroup>
<col style="width: 35px;"> <!-- 47 times -->
<col>
</colgroup>In v4, however, there are not enough <col> elements (only 23 instead of 47). Adding the col elements manually seems to solve the issue. So I guess there could be a problem in the HTML generation.