Open Angel-Ponce opened 2 years ago
What I did is export the blade files, go to resources/views/livewire/datatables/datatable.blade.php
, add the following class:
<div class="flex justify-between items-center mb-1"> ---> add 'flex-wrap'
<div class="h-10 flex items-center">
@if($this->searchableColumns()->count())
<div class="w-96 flex rounded-lg shadow-sm"> ---> add 'mb-3 md:mb-0'
<div class="relative flex-grow focus-within:z-10">
...
</div>
</div>
@endif
</div>
@if($this->activeFilters)
<span class="text-xl text-blue-400 uppercase">FILTERS ACTIVE</span>
@endif
<div class="flex flex-wrap items-center space-x-1"> ---> add 'flex-wrap'
<x-icons.cog wire:loading class="h-9 w-9 animate-spin text-gray-400" />
...
The flex-wrap
is for the export, hide/show column, etc. buttons to correctly display on small screen.
My knowledge on tailwind is very limited or css on general so I can't help you other than this, so just take it as a hint what to do.
Publish datatables views is the unique way to solve this?
Thanks for your fast response... 🥺
On small devices the search datatable option is not responsive. help