search

livewire / flux

The official Livewire UI component library
445 stars 38 forks source link

Switch and checkbox not displaying properly. #58

Closed bawbanksy closed 3 weeks ago

bawbanksy commented 3 weeks ago

Having trouble with UI elements rendering correctly. Screenshot 2024-09-25 at 12 45 43 PM

First is checkbox, second is switch

If I mess with the stubs I can get it to respect styles, but out of the box it isn't working, it could just be a config issue on my end.

I have added the @fluxStyles and @fluxScripts in my app layout.

I have also attempted to publish stubs with no avail. Kind of lost.

My tailwind.config.js looks like so-

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./vendor/laravel/jetstream/**/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
        "./vendor/livewire/flux/stubs/**/*.blade.php",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter", ...defaultTheme.fontFamily.sans],
            },
            colors: {
                primary: {
                    10: "#ECF2FE",
                    25: "#D9E5FC",
                    50: "#C6D9FB",
                    100: "#B3CCF9",
                    200: "#A0BFF8",
                    300: "#7AA5F5",
                    400: "#2E72EF",
                    500: "#1360ED",
                    600: "#115BE4",
                    700: "#0E4CBE",
                    800: "#0B3D98",
                    900: "#092D72",
                },
                status: {
                    success: {
                        main: "rgb(34, 197, 94)",
                        text: "rgb(14, 94, 44)",
                        bg: "rgb(220, 252, 231)",
                    },
                    danger: {
                        main: "rgb(243, 94, 94)",
                        text: "rgb(124, 15, 15)",
                        bg: "rgb(254, 226, 226)",
                    },
                    warning: {
                        main: "rgb(234, 179, 8)",
                        text: "rgb(133, 77, 14)",
                        bg: "rgb(254, 249, 195)",
                    },
                    info: {
                        main: "rgb(59, 130, 246)",
                        text: "rgb(29, 78, 216)",
                        bg: "rgb(219, 234, 254)",
                    },
                },
            },
            keyframes: {
                progressBar: {
                    "0%": { width: "0%" },
                    "100%": { width: "100%" },
                },
            },
            animation: {
                progressBarReverse: "progressBar 5000ms linear reverse",
            },
        },
    },

    plugins: [
        require("@tailwindcss/forms"),
        require("@tailwindcss/typography"),
    ],
};
joshhanley commented 3 weeks ago

@bawbanksy can you share your layout file? Thanks!

bawbanksy commented 3 weeks ago 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" />
    <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
        rel="stylesheet">

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
    </style>

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('images/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('images/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('images/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ asset('images/site.webmanifest') }}">
    <link rel="mask-icon" href="{{ asset('images/safari-pinned-tab.svg') }}" color="#5bbad5">
    <meta name="apple-mobile-web-app-title" content="121 Safety">
    <meta name="application-name" content="121 Safety">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <!-- Scripts -->
    <script src="https://kit.fontawesome.com/672009082e.js" crossorigin="anonymous"></script>

    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/@alpinejs/ui@3.13.5-beta.0/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <!-- Styles -->

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @fluxStyles
    <!-- Styles -->
    <style>
        @charset "UTF-8";

        /*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
 */

        .pika-single {
            z-index: 9999;
            display: block;
            position: relative;
            color: #333;
            background: #fff;
            border: 1px solid #ccc;
            border-bottom-color: #bbb;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        /*
clear child float (pika-lendar), using the famous micro clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/
*/
        .pika-single:before,
        .pika-single:after {
            content: " ";
            display: table;
        }

        .pika-single:after {
            clear: both
        }

        .pika-single.is-hidden {
            display: none;
        }

        .pika-single.is-bound {
            position: absolute;
            box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);
        }

        .pika-lendar {
            float: left;
            width: 240px;
            margin: 8px;
        }

        .pika-title {
            position: relative;
            text-align: center;
        }

        .pika-label {
            display: inline-block;
            position: relative;
            z-index: 9999;
            overflow: hidden;
            margin: 0;
            padding: 5px 3px;
            font-size: 14px;
            line-height: 20px;
            font-weight: bold;
            background-color: #fff;
        }

        .pika-title select {
            cursor: pointer;
            position: absolute;
            z-index: 9998;
            margin: 0;
            left: 0;
            top: 5px;
            opacity: 0;
        }

        .pika-prev,
        .pika-next {
            display: block;
            cursor: pointer;
            position: relative;
            outline: none;
            border: 0;
            padding: 0;
            width: 20px;
            height: 30px;
            /* hide text using text-indent trick, using width value (it's enough) */
            text-indent: 20px;
            white-space: nowrap;
            overflow: hidden;
            background-color: transparent;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 75% 75%;
            opacity: .5;
        }

        .pika-prev:hover,
        .pika-next:hover {
            opacity: 1;
        }

        .pika-prev,
        .is-rtl .pika-next {
            float: left;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
        }

        .pika-next,
        .is-rtl .pika-prev {
            float: right;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
        }

        .pika-prev.is-disabled,
        .pika-next.is-disabled {
            cursor: default;
            opacity: .2;
        }

        .pika-select {
            display: inline-block;
        }

        .pika-table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            border: 0;
        }

        .pika-table th,
        .pika-table td {
            width: 14.285714285714286%;
            padding: 0;
        }

        .pika-table th {
            color: #999;
            font-size: 12px;
            line-height: 25px;
            font-weight: bold;
            text-align: center;
        }

        .pika-button {
            cursor: pointer;
            display: block;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            outline: none;
            border: 0;
            margin: 0;
            width: 100%;
            padding: 5px;
            color: #666;
            font-size: 12px;
            line-height: 15px;
            text-align: right;
            background: #f5f5f5;
            height: initial;
        }

        .pika-week {
            font-size: 11px;
            color: #999;
        }

        .is-today .pika-button {
            color: #33aaff;
            font-weight: bold;
        }

        .is-selected .pika-button,
        .has-event .pika-button {
            color: #fff;
            font-weight: bold;
            background: #33aaff;
            box-shadow: inset 0 1px 3px #178fe5;
            border-radius: 3px;
        }

        .has-event .pika-button {
            background: #005da9;
            box-shadow: inset 0 1px 3px #0076c9;
        }

        .is-disabled .pika-button,
        .is-inrange .pika-button {
            background: #D5E9F7;
        }

        .is-startrange .pika-button {
            color: #fff;
            background: #6CB31D;
            box-shadow: none;
            border-radius: 3px;
        }

        .is-endrange .pika-button {
            color: #fff;
            background: #33aaff;
            box-shadow: none;
            border-radius: 3px;
        }

        .is-disabled .pika-button {
            pointer-events: none;
            cursor: default;
            color: #999;
            opacity: .3;
        }

        .is-outside-current-month .pika-button {
            color: #999;
            opacity: .3;
        }

        .is-selection-disabled {
            pointer-events: none;
            cursor: default;
        }

        .pika-button:hover,
        .pika-row.pick-whole-week:hover .pika-button {
            color: #fff;
            background: #ff8000;
            box-shadow: none;
            border-radius: 3px;
        }

        /* styling for abbr */
        .pika-table abbr {
            border-bottom: none;
            cursor: help;
        }
    </style>

</head>

<body class="font-sans antialiased">

    <x-notification />
    <x-banner />

    <div class="min-h-screen bg-white">

        <!-- Page Content -->
        <div class="flex">
            @yield('overlay')
            <x-navigation.sidebar />

            <main class="flex min-h-screen w-full flex-1 flex-wrap content-start bg-zinc-50 px-6">

                @livewire('navigation-menu')

                <!-- Page Heading -->
                @if (isset($header))
                {{ $header }}
                @endif
                <div class="w-full">
                    @yield('content')
                    {{ $slot ?? '' }}
                </div>
            </main>
        </div>
    </div>

    <script src="{{ route('livewire-autocomplete.asset', 'autocomplete.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>

    @fluxScripts
</body>

</html>
bawbanksy commented 3 weeks ago

even bringing it right back to the following produces the same result-

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" />
    <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('images/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('images/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('images/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ asset('images/site.webmanifest') }}">
    <link rel="mask-icon" href="{{ asset('images/safari-pinned-tab.svg') }}" color="#5bbad5">
    <meta name="apple-mobile-web-app-title" content="121 Safety">
    <meta name="application-name" content="121 Safety">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <!-- Styles -->

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @fluxStyles
    <!-- Styles -->
</head>

<body class="font-sans antialiased">
    <div>
        @yield('content')
        {{ $slot ?? '' }}
    </div>
    @fluxScripts
</body>
</html>
bawbanksy commented 3 weeks ago

Seems wider spread, here is a field with copyable.

Screenshot 2024-09-26 at 11 51 27 am

bawbanksy commented 3 weeks ago

Still facing the same issue, running latest version. Struggling to debug

bawbanksy commented 3 weeks ago

Was an outdated version of tailwind (v3.1)