当我使用 CSS 网格运行 Dash App 时,它表现得很奇怪
Posted
技术标签:
【中文标题】当我使用 CSS 网格运行 Dash App 时,它表现得很奇怪【英文标题】:Dash App acting strange when I run it with CSS grid 【发布时间】:2021-05-13 03:00:06 【问题描述】:我的代码需要一些帮助,我认为最好从 Github 分享我的代码。我创建了一个名为 css_problem_branch 的单独分支来显示我遇到的问题。
Github 仓库链接:https://github.com/sebastian-meckovski/Covid19-visualisation/tree/css_problem_branch
我尝试重新创建的简单网格布局可以在 CssGrid 文件夹中找到,它是使用简单的 html 元素完成的,并且可以正常工作。这只是为了展示我正在尝试重新创建的内容。
但是,当我在 assets 文件夹中使用完全相同的 CSS 时,Web 应用程序开始表现得很奇怪。当我减小浏览器的宽度时它不会重新组织网格,当我减小它时容器元素的宽度变得非常大(这适用于纯 HTML 元素)
可能是什么原因,我该如何解决?
【问题讨论】:
【参考方案1】:解释可能发生的事情
我认为您遇到的问题是人们称之为grid blowout
的一个实例。
基本上发生的情况是网格的子元素占用了太多空间,导致列被推到右侧。
因此,您在纯 html 的小示例中没有遇到问题的原因是,子元素只是 div
元素,其中包含少量文本。
您的Dash
应用程序中的图表可能会变得非常大,正如您所经历的那样。
为了解决这个问题,我们可以使用minmax css function 为列设置一个受限制的大小范围:
问题的解决方法
而不是这个:
.container
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"content0 content0"
"content1 content1"
"content2 content3"
"content4 content4";
grid-gap: 2px;
@media only screen and (max-width: 600px)
.container
grid-template-columns: 1fr;
grid-template-rows: 0.1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"content0"
"content1"
"content2"
"content3"
"content4";
试试这个:
.container
display: grid;
height: 100vh;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"content0 content0"
"content1 content1"
"content2 content3"
"content4 content4";
grid-gap: 2px;
@media only screen and (max-width: 600px)
.container
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 0.1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"content0"
"content1"
"content2"
"content3"
"content4";
使用的来源(关于这个主题的解释比我在这里做的更深入):
https://css-tricks.com/preventing-a-grid-blowout/ https://blog.agney.dev/grid-blowout/【讨论】:
我刚刚试了一下,它完全按照我的意愿工作!非常感谢!我失去了最终会解决它的希望! 我遇到的另一个问题我相信您能够解决,如果您有兴趣,这是一个容易接受的答案。在这里***.com/questions/66431201/…以上是关于当我使用 CSS 网格运行 Dash App 时,它表现得很奇怪的主要内容,如果未能解决你的问题,请参考以下文章
如何在 CSS 中正确设置网格以实现移动友好视图? (Python Dash 项目)
Python Plotly Dash 有没有办法在资产文件夹之外使用 Css 文件? / 拥有多个资产文件夹