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.

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

Overflowing component when using Tailwind, Bootstrap, or other CSS frameworks that use .container #10

Open
cjlryan opened this issue Aug 28, 2024 · 0 comments

Comments

@cjlryan
Copy link

cjlryan commented Aug 28, 2024

Hey guys, properly great little component, a real time saver!

I've ran into a small but annoying bug when using tailwind where the internal "container" class clashes with tailwind and causes the layout to overflow beyond the screen width.

TLDR, the .container class adds 2rem of padding which increases the width of the element beyond the size of the scoped area.

My code:

<div class="relative w-full">
	<Stepper {steps} padding="0rem" />
</div>

Problematic code inside Stepper:

<div style="height: 248px; overflow: visible;" class="[[[container]]] svelte-1knpftn">
        <div class="step-container svelte-1knpftn">
                ...

Lots of CSS frameworks (Bootstrap, Tailwind etc) add styles to the .container class, and it appears to only be used to add a position: relative to the element so should be a simple fix.

Working on testing a PR for it now :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant