"Columns" dropdown not working and styling incorrect #1183

nesben · 2023-05-05T09:01:35Z

nesben
May 5, 2023

Hello! I've been playing around with livewire tables, and I can't seem to get it working...

Whenever i click inside the "Search" input, i receive an error (if the field is empty)

Furthermore, the "Columns" dropdown field doesn't open when clicking, nor does it error in the console.

Also, the styling seems quite messed up... some fields have styling, others don't, and I can't seem to figure out why...

Any helps is appreciated 😄

Here's my code:

resources/js/app.js

import './bootstrap';
import Alpine from "alpinejs";
import focus from '@alpinejs/focus';
import '../css/app.css';

window.Alpine = Alpine;
window.Alpine.plugin(focus);
Alpine.start();

resources/views/tenant/layout/layout.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>

    @vite('resources/js/app.js')

    @livewireStyles
</head>

<body>
    <main class="flex h-screen bg-white">
        <aside class="bg-white w-[15%] h-screen">
            <ul class="list-none mt-[50px]">
                @foreach ($tenant_routes as $route)
                    <li class="@active(strtolower($route->name)) mb-3 flex items-center w-full p-2 ps-10 text-gray-900 group">
                        <a href="{{ route(strtolower($route->name), ['tenant' => tenant()]) }}">{{ $route->name }}</a>
                    </li>
                @endforeach
            </ul>
        </aside>

        <section class="flex-1 p-[50px] rounded-tr-50 rounded-tl-[50px] bg-gray-100">
            <!-- Main Content -->
            <h2 id='page-title' class="font-bold
            text-2xl mb-12">{{ $title }}</h2>
            <div id='page-content' class="page-content">
                @yield('content')
            </div>
        </section>
    </main>

    @livewireScripts
    <script>
        window.Livewire.connection.headers = {
            ...window.Livewire.connection.headers,
            'X-Tenant': '{{ tenant()->id }}'
        };
    </script>

</body>

</html>

resources/css/app.css

@import "@fortawesome/fontawesome-free/css/all.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    overflow: hidden;
}

[x-cloak] {
    display: none !important;
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  darkMode: 'class', // or 'media' or 'class'
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php",
  ],
  theme: {
    extend: {},
  },
}

resources/views/tenant/sales/invoices.blade.php

@extends('tenant.layout.layout', ['title' => 'Test2'])

@section('content')
    <div>
        <div class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
            <x-tenant.card title="Card Title" content="Card Content" type="Card Type" size="w-96" icon='test' />
            <x-tenant.card title="Card Title" content="Card Content" type="Card Type" size="w-96" icon='test' />
            <x-tenant.card title="Card Title" content="Card Content" type="Card Type" size="w-96" icon='test' />
        </div>


        <div>
            <livewire:tenant.invoices-table />
        </div>
    </div>
@endsection

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

lrljoe · 2023-05-05T11:35:59Z

lrljoe
May 5, 2023
Collaborator Sponsor

Can you confirm:
which package version you're using
Tailwind version
Laravel Version
Livewire Version
Alpine version

You need to include the tailwind forms plugins etc to maintain styling in your Tailwind config file

10 replies

nesben May 27, 2023
Author

@lrljoe Hi, no I didn't get it fixed.

Though, I have some more information regarding the behaviour...

I tried adding filters, and the dropdown experiences the same issue - it doesn't show when i click on it.

It seems like a styling problem with tailwind possibly... Because when i click the buttons, they change the "aria-expanded" to "true".

lrljoe May 27, 2023
Collaborator Sponsor

Are you getting any errors in your console if you open devtools in your browser and click on the drop-down?

If you have published the views previously then try removing the published views too

Can you paste your vite config file in too please

nesben Jun 4, 2023
Author

@lrljoe
I apologise for the late reply...

I haven't published the views.

When clicking on the dropdown (both filters and columns dropdown) I don't get any errors. Console is empty. Though, when i click on the search input field i get the following error:

But that error doesn't prevent me from searching. Searching with the input works fine, but the error shows up when the input is empty and I click on it.

Heres my vite config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

nesben Jun 7, 2023
Author

@lrljoe I believe it's an issue with loading Alpine.js. I'm importing alpinejs in my app.js which is imported in the main layout file. The alpinejs stuff in my main layout file works fine, but not the table for some reason...

lrljoe Aug 2, 2023
Collaborator Sponsor

are you still having an issue? apologies for not coming back sooner...

itsmill3rtime · 2025-01-11T19:51:41Z

itsmill3rtime
Jan 11, 2025

you need to add the additional tailwind packages and then add to tailwind.config.js

yarn add @tailwindcss/typography @tailwindcss/forms --dev

and then inside tailwind.config.js

import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

and within the plugins: [ ] array at the bottom add them

  plugins: [
        forms,
        typography,
    ],

0 replies

lrljoe · 2025-01-17T03:56:38Z

lrljoe
Jan 17, 2025
Collaborator Sponsor

Please don't reply to questions from years ago!

0 replies

Uh oh!

"Columns" dropdown not working and styling incorrect #1183

Uh oh!

nesben May 5, 2023

Replies: 3 comments · 10 replies

Uh oh!

Uh oh!

lrljoe May 5, 2023 Collaborator Sponsor

Uh oh!

nesben May 27, 2023 Author

Uh oh!

Uh oh!

lrljoe May 27, 2023 Collaborator Sponsor

Uh oh!

nesben Jun 4, 2023 Author

Uh oh!

nesben Jun 7, 2023 Author

Uh oh!

lrljoe Aug 2, 2023 Collaborator Sponsor

Uh oh!

itsmill3rtime Jan 11, 2025

Uh oh!

lrljoe Jan 17, 2025 Collaborator Sponsor

nesben
May 5, 2023

Replies: 3 comments 10 replies

lrljoe
May 5, 2023
Collaborator Sponsor

nesben May 27, 2023
Author

lrljoe May 27, 2023
Collaborator Sponsor

nesben Jun 4, 2023
Author

nesben Jun 7, 2023
Author

lrljoe Aug 2, 2023
Collaborator Sponsor

itsmill3rtime
Jan 11, 2025

lrljoe
Jan 17, 2025
Collaborator Sponsor