Skip to content

Misleading documentation or bug - custom toast width #630

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
Open
tecoad opened this issue May 9, 2025 · 0 comments · May be fixed by #631
Open

Misleading documentation or bug - custom toast width #630

tecoad opened this issue May 9, 2025 · 0 comments · May be fixed by #631

Comments

@tecoad
Copy link

tecoad commented May 9, 2025 •
edited
Loading

I noticed this Headless / TailwindCSS example from the docs, uses this class for the parent div:

<div className="flex rounded-lg bg-white shadow-lg ring-1 ring-black/5 w-full md:max-w-[364px] items-center p-4">

However, it seems counter intuitive, because the parent div doesnt sets itself as 100% in this case:

sonner/src/styles.css

Lines 85 to 97 in 7967502

[data-sonner-toast] {
--y: translateY(100%);
--lift-amount: calc(var(--lift) * var(--gap));
z-index: var(--z-index);
position: absolute;
opacity: 0;
transform: var(--y);
touch-action: none;
transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
box-sizing: border-box;
outline: none;
overflow-wrap: anywhere;
}

So in order of full-width to work in the custom component we have to:

<Toaster
position="bottom-center"
toastOptions={{
	className: 'w-full',
}}
/>

Is this undocumented? Any specific behind it @emilkowalski ? Shouldn't width 100% be added to data-sonner-toast?
tecoad added a commit to tecoad/sonner that referenced this issue May 9, 2025
@tecoad
Update styles.css

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
7403ff0 
Fixes: emilkowalski#630
@tecoad tecoad linked a pull request May 9, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: custom toast not getting width && remove data-styled selector from behind toasts tecoad/sonner
1 participant
@tecoad