Home How to left-align some content in Clarity <clr-dg-footer>

# How to left-align some content in Clarity <clr-dg-footer>

ARM
1#
ARM Published in 2017-12-07 22:37:59Z
 I have a Clarity datagrid with pagination and a filter. I have some text that I would like to left-align on the same line as the pagination information. What's the correct way to do this? I've tried setting float: left; and float:right; in the two spans and also using the built-in "row" class. For reference, my footer looks like  Search by value {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}}  This is transformed into something like: 
1 - 10 of 103 users
...

Eudes
2#
 To give a general explanation, the footer looks like this when rendered: 
 The footer itself is a flexbox, so setting widths as percentage on your content will not do anything. Clarity doesn't have a great way for you to left-align your content right now, and you should definitely open a ticket for it on GitHub, but in the meantime you can add the style flex: 1 to .datagrid-foot-description in your CSS which will make it take the all the available space on the footer, and then add any styles you want to your own content to display it as you want. For instance, using more flex with the two spans from your example: .datagrid-foot-description { flex: 1; display: flex; } .search-by-value { flex: 1; }  This will make the footer description "fill" the empty space in the footer, and the search by value "fill" the description.
 You need to login account before you can post.
Processed in 0.33161 second(s) , Gzip On .