0

我有一个带有分页和过滤器的清晰数据网格。我有一些文本，我想在与分页信息相同的行上左对齐。这样做的正确方法是什么？我已经尝试在两个跨度中设置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>
4

2 回答 2

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>

页脚本身是一个 flexbox，因此将宽度设置为内容的百分比不会做任何事情。Clarity 没有一个很好的方法让你现在左对齐你的内容，你绝对应该在 GitHub 上为它打开一张票，但同时你可以在你的 CSS 中添加样式flex: 1，.datagrid-foot-description这将使它占据页脚上的所有可用空间，然后将您想要的任何样式添加到您自己的内容中以根据需要显示它。例如，在示例中的两个跨度中使用更多 flex： 

.datagrid-foot-description {
    flex: 1;
    display: flex;
}

.search-by-value {
    flex: 1;
}

这将使页脚描述“填充”页脚中的空白区域，并通过值搜索“填充”描述。

于 2017-12-11T16:59:10.930 回答
0

以下左对齐页脚的内容：

.datagrid-foot {
    justify-content: left !important;
}
于 2018-03-25T14:37:46.157 回答