search

MedicOneSystems / livewire-datatables

Advanced datatables using Laravel, Livewire, Tailwind CSS and Alpine JS
https://livewire-datatables.com/
MIT License
1.2k stars 259 forks source link

Search option is not responsive #350

Open Angel-Ponce opened 3 years ago

Angel-Ponce commented 3 years ago

On small devices the search datatable option is not responsive. help

ghost commented 3 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.

Angel-Ponce commented 3 years ago

Publish datatables views is the unique way to solve this?

Thanks for your fast response... 🥺