Add alignment on Event Logs page
- Align table search, count and date components on Event Logs page.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Id681d50f57a6fca86b8d8ba57f8e3420c1a0e56e
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index e182708..b5ffd7a 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -1,21 +1,21 @@
<template>
<b-container fluid="xl">
<page-title />
- <b-row class="mb-3">
- <b-col sm="7" xl="4" class="d-flex flex-column justify-content-end">
+ <b-row class="align-items-start">
+ <b-col sm="8" xl="6" class="d-sm-flex align-items-end">
<search
:placeholder="$t('pageEventLogs.table.searchLogs')"
@change-search="onChangeSearchInput"
@clear-search="onClearSearchInput"
/>
+ <div class="ml-sm-4">
+ <table-cell-count
+ :filtered-items-count="filteredRows"
+ :total-number-of-cells="allLogs.length"
+ ></table-cell-count>
+ </div>
</b-col>
- <b-col sm="3" class="d-flex flex-column justify-content-end">
- <table-cell-count
- :filtered-items-count="filteredRows"
- :total-number-of-cells="allLogs.length"
- ></table-cell-count>
- </b-col>
- <b-col sm="8" md="7" xl="5">
+ <b-col sm="8" md="7" xl="6">
<table-date-filter @change="onChangeDateTimeFilter" />
</b-col>
</b-row>