Flux Input File Template Breaks with sr-only Class #701

beneyraheem · 2024-11-19T16:49:52Z

The template breaks when using flux:input file inputs, particularly when the input tag has the sr-only class. This issue arises only when the content contains a significant amount of content, such as I use lorem2000 text to fillup the area.

Steps to Reproduce

Use the provided template (see below) to recreate the issue.
Add significant content to the center content area (e.g., lorem2000).
Add flux:input file inputs to the content.
Observe the broken behavior in the template.

Sample Template

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">

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

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.bunny.net">
  <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />

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

<body class="bg-white">

  <div x-data="{ sidebarOpen: false }" class="h-screen flex flex-col  overflow-hidden">
    <!-- Fixed Header -->
    <header class="fixed top-0 left-0 right-0 z-50 flex items-center bg-gray-100 p-4 shadow">
      <!-- Toggle Buttons -->
      <button @click="sidebarOpen = !sidebarOpen" class="mr-4 p-2 bg-gray-300 rounded">
        <span x-show="!sidebarOpen">☰</span>
        <span x-show="sidebarOpen">✖</span>
      </button>
      <h1 class="font-bold">Flux Playground</h1>
    </header>

    <!-- Main Content -->
    <div class="flex-1 pt-16 flex overflow-hidden">
      <!-- Sidebar -->
      <div
        :class="{
            'w-16': !sidebarOpen,
            'w-64': sidebarOpen,
            'sm:translate-x-0': true,
            'translate-x-0': sidebarOpen,
            '-translate-x-full': !sidebarOpen
        }"
        class="fixed top-16 bottom-0 left-0 z-40 bg-gray-800 text-white transition-transform duration-300 overflow-y-auto">
        <!-- Sidebar content -->
        <div class="p-4 flex flex-col items-left sm:items-start">
          <ul>
            <li class="py-2 flex items-center">
              <span class="mr-2">🏠</span>
              <span x-show="sidebarOpen">Home</span>
            </li>
            <!-- Add more items if needed -->
          </ul>
        </div>
      </div>

      <!-- Overlay for Sidebar on mobile -->
      <div x-show="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 bg-black bg-opacity-50 z-30 sm:hidden"
        x-cloak>
      </div>

      <!-- Content Area -->
      <div class="sm:ml-16 flex flex-1 overflow-y-auto sm:overflow-hidden flex-col sm:flex-row">
        <!-- Center Content -->
        <div class="flex-1 flex flex-col sm:overflow-hidden">
          <!-- Center Sticky Header -->
          <div class="flex-shrink-0">
            <div class="sticky top-0 bg-white p-4 shadow">
              Main Sticky Header
              <flux:button href="#test">Link to test</flux:button>
            </div>
          </div>
          <!-- Center Content -->
          <div class="sm:flex-1 sm:overflow-y-auto">
            <!-- Center content goes here -->
            <div class="p-4">
              <!-- Add lorem2000 to fillup the area -->
              <p>Lorem ipsum dolor</p>
              <!-- Flux file Input -->
              <flux:input type="file" wire:model="logo" label="Logo" />
              <flux:input type="file" wire:model="attachments" label="Attachments" multiple />
            </div>
          </div>
        </div>

        <!-- Right Sidebar -->
        <div class="w-full sm:w-64 flex-shrink-0 flex flex-col sm:overflow-hidden bg-gray-200">
          <!-- Right Sticky Header -->
          <div class="flex-shrink-0">
            <div class="sticky top-0 bg-gray-300 p-4 shadow">
              Right Sticky Header
            </div>
          </div>
          <!-- Right Content -->
          <div class="sm:flex-1 sm:overflow-y-auto">
            <!-- Right content goes here -->
            <div class="p-4">
              <p>Lorem ipsum dolor sit amet.</p>
              <!-- Card with ID -->
              <flux:card id="test">Test</flux:card>
              <!-- Repeat as necessary -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  @fluxScripts
</body>

</html>

Additional Notes and Suggested Fix

The issue occurs only when the input is hidden using the sr-only class.
Modifying the sr-only class to hidden resolves the issue.

The text was updated successfully, but these errors were encountered:

beneyraheem · 2024-11-19T17:05:04Z

Or should I Explicitly add the relative class to all file inputs?.

<flux:input type="file" wire:model="logo" label="Logo" class="relative" />

ju5t · 2024-11-20T18:03:26Z

Can you share a smaller reproducible code snippet? Preferably as a Volt component so it's easily copy/pasted.

beneyraheem · 2024-11-21T04:49:15Z

Can you share a smaller reproducible code snippet? Preferably as a Volt component so it's easily copy/pasted.

if you think, it is not an issue, then never mind.

ju5t · 2024-11-21T08:04:20Z

I'm asking because it's easier to help if you do so. You have wire'd up data in there so I want to try and replicate it on a fresh installation without having to figure out what did you on the PHP side of things.

beneyraheem · 2024-11-21T08:08:03Z

I didn't wire anything, it is a fresh installation and just copied file input from flux docs

ju5t · 2024-11-21T10:00:52Z

I think I understand the issue. You're seeing a scrollbar outside the content div that's not there without the file input components. Is that what you mean? Because you only mentioned Observe the broken behavior in the template. so I'm not sure what the exact issue is.

beneyraheem · 2024-11-21T10:36:49Z

Exactly, because I think sr-only is positioned absolute.

ju5t · 2024-11-21T11:18:11Z

I think the issue is that you've added overflow-hidden to the div instead of the body. Assuming you never want to have a scrollbar on the entire page but just the center content.

This doesn't feel like a Flux issue. sr-only is used all over the place with Tailwind, so it could be triggered by anything that uses it.

beneyraheem · 2024-11-21T11:23:42Z

I think the issue is that you've added overflow-hidden to the div instead of the body. Assuming you never want to have a scrollbar on the entire page but just the center content.

This doesn't feel like a Flux issue. sr-only is used all over the place with Tailwind, so it could be triggered by anything that uses it.

The same thing will happen if you add <body class="bg-white overflow-hidden"> and click the link

ju5t · 2024-11-21T12:08:54Z

The same thing will happen if you add and click the link

That's a different issue, but it's not related to Flux. Tailwind is following the most accessible way make elements visible to screen readers only using sr-only. If you'd follow your suggestion and use hidden, the element is hidden for screen readers too.

I'm happy to help with Flux issues but this is a CSS issue somewhere in your own custom layout.

beneyraheem · 2024-11-21T12:16:12Z

The same thing will happen if you add and click the link

That's a different issue, but it's not related to Flux. Tailwind is following the most accessible way make elements visible to screen readers only using sr-only. If you'd follow your suggestion and use hidden, the element is hidden for screen readers too.

I'm happy to help with Flux issues but this is a CSS issue somewhere in your own custom layout.

Alright!

I wonder why it solves when I add, relative class

<flux:input type="file" wire:model="logo" label="Logo" class="relative" />

beneyraheem · 2024-11-21T12:21:38Z

I really think FLUX FILE should have relative class

$classes = Flux::classes()->add('w-full flex relative items-center gap-4');

ju5t · 2024-11-21T20:04:16Z

You can add relative to the center content div to solve it.

- <div class="sm:flex-1 sm:overflow-y-auto"
+ <div class="sm:flex-1 sm:overflow-y-auto relative">

I don't think relative should be added to the input itself.

beneyraheem · 2024-11-21T20:14:10Z

This issue with sr-only is discussed adamwathan too, worth reading.

tailwindlabs/tailwindcss#12429

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flux Input File Template Breaks with sr-only Class #701

Flux Input File Template Breaks with sr-only Class #701

beneyraheem commented Nov 19, 2024 •

edited

Loading

beneyraheem commented Nov 19, 2024 •

edited

Loading

ju5t commented Nov 20, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

Flux Input File Template Breaks with sr-only Class #701

Flux Input File Template Breaks with sr-only Class #701

Comments

beneyraheem commented Nov 19, 2024 • edited Loading

beneyraheem commented Nov 19, 2024 • edited Loading

ju5t commented Nov 20, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

ju5t commented Nov 21, 2024

beneyraheem commented Nov 21, 2024

beneyraheem commented Nov 19, 2024 •

edited

Loading

beneyraheem commented Nov 19, 2024 •

edited

Loading