Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Select adds 'second' scrollbar #844

Open
3 tasks done
ju5t opened this issue Dec 10, 2024 · 1 comment
Open
3 tasks done

Select adds 'second' scrollbar #844

ju5t opened this issue Dec 10, 2024 · 1 comment
Assignees
@calebporzio

Comments

@ju5t
Copy link

ju5t commented Dec 10, 2024 •
edited
Loading

Flux version

v1.0.29

Livewire version

v3.5.12

What is the problem?

This is a weird one. The issue appeared after upgrading to v1.0.29.

Our body-tag has overflow-y-scroll. I don't know why.

<body class="overflow-y-scroll bg-red-900">
    <flux:select variant="listbox" placeholder="Choose industry...">
        <flux:option>Photography</flux:option>
        <flux:option>Design services</flux:option>
        <flux:option>Other</flux:option>
    </flux:select>
    @fluxScripts
</body>

This renders a scrollbar, you can see a gap on the right. In our app itself the scrollbar does show, but in my screenshot it doesn't for some reason.

Image

Whenever I open the select, it adds a second scrollbar:

Image

Removing overflow-y-scroll solves the issue for us so feel free to close this. If anything it helps others coming across the same thing in the future.

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.
@joshhanley
Copy link
Member

@ju5t I've had a look into this, and what is happening is when the scroll lock is applied, when a dropdown is open, these styles style="padding-right: 7px; overflow: hidden;" get applied to the <html> element.

I'm not exactly sure why there is a padding right being added.

What should also be happening is it would normally detect what overflow type you have, store it, remove it and apply overflow hidden. But your overflow is being applied to the body tag, and the scroll lock is being applied to the body tag, hence why the "double scroll" gap is happening (one is your body scroll bar and the other is the padding right).

Maybe @calebporzio can shed some light on why the padding right and why it's being applied to the html tag instead of body, as I would typically apply stuff to the body tag as you have.

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

@calebporzio calebporzio

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@joshhanley @ju5t @calebporzio