Fix BS4 reorder divs

Author: rappasoft

resources/views/bootstrap-4/datatable.blade.php

@@ -30,9 +30,9 @@ class="container-fluid p-0"
             </div>
 
             <div class="d-md-flex">
-                @include('livewire-tables::bootstrap-4.includes.bulk-actions')
-                @include('livewire-tables::bootstrap-4.includes.column-select')
-                @include('livewire-tables::bootstrap-4.includes.per-page')
+                <div>@include('livewire-tables::bootstrap-4.includes.bulk-actions')</div>
+                <div>@include('livewire-tables::bootstrap-4.includes.column-select')</div>
+                <div>@include('livewire-tables::bootstrap-4.includes.per-page')</div>
             </div>
         </div>
 

resources/views/bootstrap-4/includes/bulk-actions.blade.php

@@ -1,20 +1,22 @@
 @if ($bulkActionsEnabled && count($bulkActions))
-    <div class="dropdown mb-3 mb-md-0 d-block d-md-inline">
-        <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="bulkActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            @lang('Bulk Actions')
-        </button>
+    <div class="mb-3 mb-md-0">
+        <div class="dropdown d-block d-md-inline">
+            <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="bulkActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                @lang('Bulk Actions')
+            </button>
 
-        <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="bulkActions">
-            @foreach($bulkActions as $action => $title)
-                <a
-                    href="#"
-                   wire:click.prevent="{{ $action }}"
-                   wire:key="bulk-action-{{ $action }}"
-                   class="dropdown-item"
-                >
-                    {{ $title }}
-                </a>
-            @endforeach
+            <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="bulkActions">
+                @foreach($bulkActions as $action => $title)
+                    <a
+                        href="#"
+                       wire:click.prevent="{{ $action }}"
+                       wire:key="bulk-action-{{ $action }}"
+                       class="dropdown-item"
+                    >
+                        {{ $title }}
+                    </a>
+                @endforeach
+            </div>
         </div>
     </div>
 @endif

resources/views/bootstrap-4/includes/column-select.blade.php

@@ -1,43 +1,44 @@
 @if ($columnSelect)
-    <div
-        x-cloak
-        x-data="{ open: false }"
-        x-on:keydown.escape.stop="open = false"
-        x-on:mousedown.away="open = false"
-        class="dropdown mb-3 mb-md-0 pl-0 pl-md-2 d-block d-md-inline"
-    >
-        <button
-            x-on:click="open = !open"
-            class="btn dropdown-toggle d-block w-100 d-md-inline"
-            type="button"
-            id="columnSelect"
-            aria-haspopup="true"
-            aria-expanded="false"
-        >
-            @lang('Columns')
-        </button>
-
+    <div class="mb-3 mb-md-0 pl-0 pl-md-2">
         <div
-            class="dropdown-menu dropdown-menu-right w-100"
-            :class="{'show' : open}"
-            aria-labelledby="columnSelect"
+            x-data="{ open: false }"
+            x-on:keydown.escape.stop="open = false"
+            x-on:mousedown.away="open = false"
+            class="dropdown d-block d-md-inline"
         >
-            @foreach($columns as $column)
-                @if ($column->isVisible() && $column->isSelectable())
-                    <div wire:key="columnSelect-{{ $loop->index }}">
-                        <label class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}">
-                            <input
-                                wire:model="columnSelectEnabled"
-                                wire:target="columnSelectEnabled"
-                                wire:loading.attr="disabled"
-                                type="checkbox"
-                                value="{{ $column->column() }}"
-                            />
-                            <span class="ml-2">{{ $column->text() }}</span>
-                        </label>
-                    </div>
-                @endif
-            @endforeach
+            <button
+                x-on:click="open = !open"
+                class="btn dropdown-toggle d-block w-100 d-md-inline"
+                type="button"
+                id="columnSelect"
+                aria-haspopup="true"
+                x-bind:aria-expanded="open"
+            >
+                @lang('Columns')
+            </button>
+
+            <div
+                class="dropdown-menu dropdown-menu-right w-100 mt-0 mt-md-3"
+                :class="{'show' : open}"
+                aria-labelledby="columnSelect"
+            >
+                @foreach($columns as $column)
+                    @if ($column->isVisible() && $column->isSelectable())
+                        <div wire:key="columnSelect-{{ $loop->index }}">
+                            <label class="px-2 {{ $loop->last ? 'mb-0' : 'mb-1' }}">
+                                <input
+                                    wire:model="columnSelectEnabled"
+                                    wire:target="columnSelectEnabled"
+                                    wire:loading.attr="disabled"
+                                    type="checkbox"
+                                    value="{{ $column->column() }}"
+                                />
+                                <span class="ml-2">{{ $column->text() }}</span>
+                            </label>
+                        </div>
+                    @endif
+                @endforeach
+            </div>
         </div>
     </div>
 @endif