table controls align

Author: szczepanmasny

src/utils/crud/components/DataTableClientSide.vue

@@ -14,7 +14,7 @@
     >
       <template slot="center">
         <!-- Search by fields -->
-        <v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
+        <v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;">
           <v-btn small fab dark slot="activator" class="primary">
             <v-icon>filter_list</v-icon>
           </v-btn>
@@ -40,7 +40,7 @@
         </v-menu>
 
         <!-- Search in table -->
-        <span style="margin-right:30px;display:inline-block;width:250px;">
+        <span  style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
           <v-text-field
             append-icon="search"
             :label="$t('global.datatable.search')"
@@ -53,7 +53,7 @@
 
         <!-- Select statuses (active/inactive) -->
         <template v-if="['soft', 'both', 'filter'].includes(deleteMode)">
-          <span style="margin-right:30px;display:inline-block;width:250px;">
+          <span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
             <v-autocomplete
               :label="$t('global.datatable.status.title')"
               v-bind:items="statuses"

src/utils/crud/components/DataTableControls.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card-title class="card-title table-controls">
     <v-layout row wrap>
-      <v-flex xs12 lg3>
+      <v-flex xs12 lg3 text-xs-center>
         <!-- Dialog for creating item -->
         <v-tooltip top v-if="creator">
           <v-btn fab dark color="green" @click="create()" slot="activator">
@@ -40,10 +40,10 @@
         </v-tooltip>
         <slot name="left"></slot>
       </v-flex>
-      <v-flex xs12 lg6 text-xs-left text-lg-center>
+      <v-flex xs12 lg6 text-xs-center>
         <slot name="center"></slot>
       </v-flex>
-      <v-flex xs12 lg3 text-xs-left text-lg-right>
+      <v-flex xs12 lg3 text-xs-center>
         <!-- Refresh table -->
         <v-tooltip top>
           <v-btn 

src/utils/crud/components/DataTableServerSide.vue

@@ -14,7 +14,7 @@
     >
       <template slot="center">
         <!-- Search by fields -->
-        <v-menu offset-y :close-on-content-click="false" style="margin-right:30px;">
+        <v-menu offset-y :close-on-content-click="false" style="margin-right:15px;margin-left:15px;">
           <v-btn small fab dark slot="activator" class="primary">
             <v-icon>filter_list</v-icon>
           </v-btn>
@@ -35,13 +35,13 @@
         </v-menu>
 
         <!-- Search in table -->
-        <span style="margin-right:30px;display:inline-block;width:250px;">
+        <span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
           <v-text-field append-icon="search" :label="$t('global.datatable.search')" single-line hide-details v-model="search" min-width="200" @input="searchItems(true)"></v-text-field>
         </span>
 
         <!-- Select statuses (active/inactive) -->
         <template v-if="['soft', 'both', 'filter'].includes(deleteMode)">
-          <span style="margin-right:30px;display:inline-block;width:250px;">
+          <span style="margin-right:15px;margin-left:15px;display:inline-block;width:250px;">
             <v-autocomplete :label="$t('global.datatable.status.title')" v-bind:items="statuses" v-model="selectedStatuses" single-line item-text="text" item-value="value" multiple chips></v-autocomplete>
           </span>
         </template>