英文:
React Big Calendar expanding its container
问题
对于屏幕尺寸为13英寸或更小的情况,您会发现日历会扩展到容器/屏幕的宽度,从而导致水平滚动条出现,将部分内容呈现在窗口外...
https://hojden.fanus.app/calendar
这仅发生在当前月份(三月),而不会在其他月份发生。例如,二月,上个月,完全正常。
到目前为止,我认为问题是由于某些条目的标题,其中一些相当长。尽管在CSS中有省略号的解决方案,但问题似乎源自此。尝试在DOM中删除本月的最后一周(3月27日 - 2月2日),日历将适应容器。
我无法找到解决方案。
请给予建议,谢谢!
英文:
For screens that are 13" and smaller, you will see that the calendar is expanding over the container/screen width and thus causing horizontal scrollbar to happen rendering parts of the content outside the window...
https://hojden.fanus.app/calendar
This happens only in the current month (March), and not all others. For example February, previous month, is totally fine.
I have so far reckoned that the issue happens due to titles of some entries, some of them being pretty long. Although there's ellipsis solution in the CSS, the problem seems to originate from there. Try to delete the entire last week of the month in the DOM (27 Mar - 2 Feb) and the calendar will work to fit in the container.
I'm stuck as to find the solution.
Please advise, thanks!
答案1
得分: 1
将这些样式放在其中可能是一个临时解决方案:
#main-viewport { width: -webkit-fill-available; padding-right: 5%; }
对我来说看起来更好...
英文:
putting these styles in may be a temporary solution:
#main-viewport { width: -webkit-fill-available; padding-right: 5%; }
makes it look better for me...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论