React Big Calendar 扩展其容器

huangapple go评论75阅读模式
英文:

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...

huangapple
  • 本文由 发表于 2023年3月7日 08:59:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/75657169.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定