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

Changing margin shifts following content #11

Open
Neon-Ape opened this issue Aug 1, 2020 · 2 comments
Open

Changing margin shifts following content #11

Neon-Ape opened this issue Aug 1, 2020 · 2 comments

Comments

@Neon-Ape
Copy link

Neon-Ape commented Aug 1, 2020

Any content after Tabs will be shifted upward by .5em when the last Tab is selected.
This is due to this CSS rule:
.svelte-tabs__tab-panel { margin-top: 0.5em; }
Putting the margin on the TabList instead fixes the problem.
.svelte-tabs__tab-list { margin-bottom: .5em; }

@JHethDev
Copy link

Another option for removing the unwanted spacing would be to move the {#if $selectedPanel === panel} block to go around the entire div in the TabPanel component as opposed to just the slot.

@Novaras
Copy link

Novaras commented May 17, 2021

Another option for removing the unwanted spacing would be to move the {#if $selectedPanel === panel} block to go around the entire div in the TabPanel component as opposed to just the slot.

This is a perfect solution, since we can now apply any style rules we want to the panels with no 'stacking' consequences at all.

It seems like this repo is not maintained however...

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

3 participants