Kevin Powell - Community•15mo ago

Slot content piling on top of other content?

I have been working on implementing an SCSS template in a SvelteKit project. My styles are coming through to the UI, however I am having trouble figuring out why some of the markdown is coming out piled up. I've tested and toggled so many things at this point, I'm not sure what to mention. If I remove all styling, the markdown paints to the browser the way you would expect: header, over main & slot content, over footer. My routing works fine, my route pages display their <h> tags, and while I've removed most styling at this point the root & body styles come through from the SCSS folder. My root layout looks like this:

<script>
  import "$lib/main.scss";
</script>

<header class="site-header">
  <div class="site-header__inner">
    <div class="site-logo">
      <a href="/">LOGO</a>
    </div>
    <nav class="nav">
      <a href="/share">share</a>
      <a href="/contact">contact</a>
      <a href="/login">login</a>
    </nav>
  </div>
</header>
<slot />

<script>
  import "$lib/main.scss";
</script>

<header class="site-header">
  <div class="site-header__inner">
    <div class="site-logo">
      <a href="/">LOGO</a>
    </div>
    <nav class="nav">
      <a href="/share">share</a>
      <a href="/contact">contact</a>
      <a href="/login">login</a>
    </nav>
  </div>
</header>
<slot />

and my root page.svelte looks like this:

<h1>Welcome to Rental Reviews</h1>
<nav>
  <a href="search">add review</a>
  <a href="see-reviews">see reviews</a>
  <a href="filter">browse</a>
</nav>
<h2>hey fellas,</h2>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>

<h1>Welcome to Rental Reviews</h1>
<nav>
  <a href="search">add review</a>
  <a href="see-reviews">see reviews</a>
  <a href="filter">browse</a>
</nav>
<h2>hey fellas,</h2>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>

while I don't want to be stuck on a project, at this point I just need to know why this is happening because it's so weird!

34 Replies

Zoë•15mo ago

Could we have a CodePen https://pen.new/ so we can have a look at what's going on First 2 things that come to mind is that there is a height 0 or using grid and they're in the same cell, both of which I feel would be noticeable and so unlikely. It's just had to know without being able to inspect it

CodePen

...

elbi3OP•15mo ago

I'm not sure how to replicate sveltekit components in a codepen, but if you have an example I can refer to I will try?

Zoë•15mo ago

Inspect HTML, then just copy the HTML on the page and then copy over the SCSS

elbi3OP•15mo ago

my scss is about 20 files

Zoë•15mo ago

Just stick it all in, I'm not going to be looking at it, just inspecting the elements

b1mind•15mo ago

https://sveltelab.dev

SvelteLab

A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.

Zoë•15mo ago

Is there a spelling error?

We can’t connect to the server at sveltelab.com.

Edit: gotcha

b1mind•15mo ago

You can also use Stack blitz directly to share Sveltekit Or if it's just minimal use the Svelte repl

elbi3OP•15mo ago

thank you I'll try to get one of these up or worst case spin up a vanilla vite app and see if it's just the SCSS (shouldn't be because I've used *my template a few times at this point 🥲 )

b1mind•15mo ago

When you say markdown you mean html? Markup? Cause yes it looks like a CSS issue to me. Got some fixed or position issues, something pulling from the flow.

elbi3OP•15mo ago

sorry mean to say markup yea I agree, I'll try to get it all up that or I really don't understand Svelte components, it was stacking anything I had in +layout.svelte file's main tag over the slot content (whatever I had in my root +page.svelte file) but I'll try to get it all up because I agree it's frustrating when people don't post all their code when asking for help sorry this is taking me so long to setup 😭 is it rude if I just link my github? I've got most of the code copied to this stackblitz, but I'm still trying to do all the installs so my package.json is the same

elbi3OP•15mo ago

https://stackblitz.com/edit/vitejs-vite-lkanuy?file=package.json

elbie

StackBlitz

Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

b1mind•15mo ago

GitHub repo is better than guessing sure

elbi3OP•15mo ago

https://github.com/Rental-Reviews-Site/User-Interface

GitHub

GitHub - Rental-Reviews-Site/User-Interface

Contribute to Rental-Reviews-Site/User-Interface development by creating an account on GitHub.

elbi3OP•15mo ago

(if I could ask for feedback, in the future how can I can ask this question better?)

Zoë•15mo ago

We just need to be able to access it to know what the issue is, as there can be many different options and we'd just be guessing

elbi3OP•15mo ago

oh one second I need to push my branch. I'm really sorry, I'm super stressed out so I keep making mistakes

Zoë•15mo ago

It's cool

elbi3OP•15mo ago

it's feature/userflow-1-setup that has the visual issue I showed in my initial question and if it's difficult to view I don't mind merging it with main I haven't done any serious logic in Svelte yet and all my design files are easily reconstructed

b1mind•15mo ago

Give me a few to get back to my PC. I'm pretty sure it's a css issues but let's look!

b1mind•15mo ago

Also https://joyofcode.xyz/categories/sveltekit

SvelteKit

SvelteKit category.

b1mind•15mo ago

My mentor does lots of great Svelte content these days.

Zoë•15mo ago

You have line-height: 0 on body, main, .general

elbi3OP•15mo ago

should it be 1?

Zoë•15mo ago

I'd remove it if you don't need it, it defaults to 1.15

elbi3OP•15mo ago

I think I confused it with letter spacing 😭 let me see if that fixes it

Zoë•15mo ago

Ohh I still wouldn't use letter-spacing: 0. It doesn't affect most people (defaults to 0), but does affect people who for accessibility reasons want the letter spacing to be greater

elbi3OP•15mo ago

this wasn't going to be my final styling, I was just trying to port in the things I planned to use and set them to be unopinionated until I finished my hifi design but I will put a note in my template for the future so I default to something accessible ty

Zoë•15mo ago

😊

elbi3OP•15mo ago

that fixed it! ahhhh what a dumb mistake! thanks @z- ::theProblemSolver::

Zoë•15mo ago

It's always worth going into inspector and just unchecking each style individually if what is happening goes against default styles. You may have to go to parent elements

elbi3OP•15mo ago

and here I was like "I guess I don't understand Svelte components" is that dev tools you are referring to?

Zoë•15mo ago

Yes, specifically the inspector in dev tools

elbi3OP•15mo ago

ok I see what you mean I'll try that next time thanks so much I really appreciate the help, I couldn't sleep because this problem was bugging me so much alright I'm going to go play some videogames I'll take a look for sure

Gaming

Programming

Slot content piling on top of other content?