当我使用 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 项目)

在烧瓶中运行 dash 应用程序

Python Plotly Dash 有没有办法在资产文件夹之外使用 Css 文件? / 拥有多个资产文件夹

为啥 Dash 在通过 PyCharm 调试时会抛出 TypeError? [关闭]

如何使css网格项目始终居中[重复]

DASH 实时烛台图表在实时更新时消失但仍保留指标