Question

我有一个带有分页和过滤器的Clarity datagrid。我有一些文本，我想在与分页信息相同的行上保持对齐。这样做的正确方法是什么？我尝试在两个跨度中设置float: left;和float:right;，并使用内置的“行”类。作为参考，我的页脚看起来像

<clr-dg-footer>
    <span style="width:100%;">Search by value</span>
    <span *ngIf="procs.length>0">
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{pagination.totalItems}}
    </span>

    <clr-dg-pagination #pagination [clrDgPageSize]="10"></clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

这转化为：

<clr-dg-footer _ngcontent-c25="" class="datagrid-foot">
  <div class="datagrid-foot-description">
      1 - 10
      of 103 users
  </div>
  <clr-dg-pagination _ngcontent-c25="" _nghost-c27="">
    <ul _ngcontent-c27="" class="pagination">
        ...
    </ul>
  </clr-dg-pagination>
</clr-dg-footer>

Answer 1

为了给出一般性解释，页脚在渲染时看起来像这样：

<clr-dg-footer>
    <various-built-in-controls-from-clarity />
    <div class="datagrid-foot-description">
        <!-- Your content goes here -->
    </div>
    <clr-dg-pagination></clr-dg-pagination>
</clr-dg-footer>

页脚本身就是一个弹性框，因此在内容中将宽度设置为百分比将不起作用。 Clarity并没有很好的方法让你现在左右对齐你的内容，你肯定应该在GitHub上为它打开一张票，但在此期间你可以将样式flex: 1添加到{{ 1}}在CSS中，它将占用页脚上的所有可用空间，然后将您想要的任何样式添加到您自己的内容中，以便根据需要显示它。例如，在示例中使用两个跨度的更多flex：

.datagrid-foot-description

这将使页脚描述＆＃34;填充＆＃34;页脚中的空白区域，以及按值搜索＆＃34;填充＆＃34;描述。

Answer 2

以下左对齐页脚的内容：

.datagrid-foot {
    justify-content: left !important;
}

如何在Clarity <clr-dg-footer>中左对齐一些内容

2 个答案: