Skip to content

[Bug]: overflow: hidden; #125

Closed
Closed

Description

@WillieOng-HK

What happened?

flatpickr.css

.fi-ta-ctn {
overflow: hidden; /* ❌ clips any content that overflows the container. */
}

Image

temp fix solution in service provider boot

FilamentView::registerRenderHook(
            PanelsRenderHook::STYLES_AFTER,
            fn (): string => new HtmlString('
                <style>
                    /* Fix for column toggle dropdown clipping */
                    /* Solution: Allow vertical overflow while keeping horizontal overflow hidden */
                    .fi-ta-ctn {
                        overflow-x: auto !important;
                        overflow-y: visible !important;
                    }
                    
                    .fi-ta-col-manager {
                        max-height: 60vh !important;
                        overflow-y: auto !important;
                    }

                    .fi-ta-col-manager::-webkit-scrollbar {
                        width: 8px;
                    }

                    .fi-ta-col-manager::-webkit-scrollbar-track {
                        background: rgb(243 244 246 / 1);
                        border-radius: 4px;
                    }

                    .dark .fi-ta-col-manager::-webkit-scrollbar-track {
                        background: rgb(31 41 55 / 1);
                    }

                    .fi-ta-col-manager::-webkit-scrollbar-thumb {
                        background: rgb(209 213 219 / 1);
                        border-radius: 4px;
                    }

                    .dark .fi-ta-col-manager::-webkit-scrollbar-thumb {
                        background: rgb(75 85 99 / 1);
                    }

                    .fi-ta-col-manager::-webkit-scrollbar-thumb:hover {
                        background: rgb(156 163 175 / 1);
                    }

                    .dark .fi-ta-col-manager::-webkit-scrollbar-thumb:hover {
                        background: rgb(107 114 128 / 1);
                    }
                </style>
            '),
        );

How to reproduce the bug

Simply install "coolsam/flatpickr": "^5.0"

Package Version

5.0

PHP Version

8.3

Laravel Version

12.0

Which operating systems does with happen with?

No response

Notes

No response

Activity

  1. haggaiwambua commented on Nov 5, 2025

    @haggaiwambua

    @WillieOng-HK .fi-ta-ctn { @apply overflow-visible; } solves the issue way cleaner, though temporal.

  2. coolsam726 commented on Jun 13, 2026

    @coolsam726
    Owner

    Fixed in #144 (and #143 where applicable). Closing manually because the PR did not include Closes #125 keywords for auto-close on merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions