Как выровнять контент по левому краю в Clarity ‹clr-dg-footer›

У меня есть 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>

html css vmware-clarity
person ARM    schedule 07.12.2017    source источник
comment
Согласно документации: ‹clr-dg-cell›‹span style=float: left;›Ваш контент, выровненный по левому краю здесь...‹/span›‹/clr-dg-cell›   -  person Hooman Bahreini    schedule 08.12.2017
comment
Можем ли мы увидеть полученный HTML-код?   -  person Chris Happy    schedule 08.12.2017
comment
@Sarhang - это содержимое ячейки, а не нижний колонтитул.   -  person ARM    schedule 08.12.2017
comment
@Chris Хэппи - конечно, но я не думаю, что это так информативно. Вы можете увидеть полные стили элементов, изучив таблицу в полном демонстрационном разделе документации по сетке данных.   -  person ARM    schedule 08.12.2017

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы дать общее объяснение, нижний колонтитул выглядит следующим образом:

<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, но тем временем вы можете добавить стиль flex: 1 к .datagrid-foot-description в свой CSS, что сделает его возьмите все доступное пространство в нижнем колонтитуле, а затем добавьте любые стили, которые вы хотите, к своему собственному контенту, чтобы отображать его так, как вы хотите. Например, используя больше гибкости с двумя интервалами из вашего примера:

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

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

Это заставит описание нижнего колонтитула «заполнить» пустое место в нижнем колонтитуле, а поиск по значению «заполнить» описание.

person Eudes    schedule 11.12.2017

arrow_upward
0
arrow_downward

Следующее выравнивает содержимое нижнего колонтитула по левому краю:

.datagrid-foot {
    justify-content: left !important;
}
person Jannie    schedule 25.03.2018