Dashing 仪表板中的第一行未对齐

Posted 2023-03-03

【中文标题】Dashing 仪表板中的第一行未对齐

【英文标题】：First row in Dashing dashboard not aligned

【发布时间】：2014-05-02 04:07:21

【问题描述】：

我有这个问题：如下图所示，我使用的布局在第一行中只有一个元素但是它有这个奇怪的右对齐问题（它延伸得太远了） /strong>。

htmlCSS

有什么问题？

这是我的第一个元素：

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" >
  <div data-id="some-id" data-view="MyWidget" data-title="Some title" style="background-color:#749396"></div>
</li>

我在application.coffee 中使用此设置（15 列，9 行，每列/行为 100 像素宽）：

Dashing.on 'ready', ->
  Dashing.widget_margins ||= [5, 5]
  Dashing.widget_base_dimensions ||= [100, 100]
  Dashing.numColumns ||= 15

当我专门设置li 的宽度时，它可以工作。

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">

这是完整的仪表板布局：

<% content_for :title do %>Dashboard<% end %>
<div class="gridster">
  <ul>

    <!-- Hack: Setting width of top row to 1640px! -->

    <li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">
      <div data-id="id1" data-view="OwnWidget" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id2" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="4" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id3" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id4" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id5" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="8" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id6" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id7" data-view="Number" style="background-color:#749396"></div>
    </li>

  </ul>
</div>

【问题讨论】：

你能分享其他<li>的代码吗？

添加了整个布局。

您是否尝试过更改 `Dashing.widget_base_dimensions ||= [100, 300]` 并根据实际行分配行 data-row="1" 和 data-row="2" 第二次获得不同的结果.我可以想象它以错误的方式计算边距。我看到您想使用不同的高度，但这可能有助于找出问题。

高度方面一切正常。如果我在第一行中放入另一个元素，将正确计算水平和垂直边距。仅当您在第一行中有一个 single 元素时才会出现问题。

你可以分享任何链接吗？

【参考方案1】：

没有任何 CSS 代码，我无法为您提供更多帮助：

该问题似乎是由填充调整问题引起的。试试这样写：

li 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

这可能（这里没有确定）解决您的问题，因为它使用减法而不是加法计算填充，这可能会解决您的问题。

这里有一篇关于 box-sizing 的文章来自 MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing，还有一篇来自 CSS-Tricks http://css-tricks.com/box-sizing/。他们应该能够帮助您进一步确定问题。

发布一些 CSS 代码！然后我们可以进一步帮助您。

【讨论】：

我认为这是对的，但这不能解释右列缺少填充的原因吗？如果它们都使用相同的代码，不是所有元素都有额外的填充吗？

@RichPeck 不一定 - 元素内部存在的元素不同，不是吗？它们可能具有不同数量的边距、填充、宽度等，因此会导致偏差。元素本身可以相同，但是当它们的内容不同并且内容中元素的边距不同时，您将获得不同的宽度和高度（在 OP 的情况下为宽度）。

可能，但如果它是一个流体界面，我仍然会期待类似的行为；如果是硬编码宽度，那么您的答案可能是正确的

@RichPeck 它不一定是流畅的界面 - 它只需要不同的内容。

我没有发布任何 CSS，因为它是标准的 Dashing 生成的 CSS（我也没有创建 JSFiddle，因为这不仅仅是一些静态网站，它是一个完整的客户端/服务器 Web 应用程序） .但是，当我应用您提供的 CSS 时，它并没有帮助。感谢您的努力。

【参考方案2】：

在 Dashing 论坛上问了同样的问题后，我得到了这个非常满意的答案：

https://github.com/Shopify/dashing/issues/339