2

I want to render child route with child layout only, without inheriting root layout.

/routes/+layout.svelte
/routes/child/+layout.svelte
/routes/child/+page.svelte

I tried child/+layout@.svelte to break inheritance, but with no luck. I don't want to use layout groups or if-else statements in parent layouts.

Is there option to break parent inheritance in elegant way?

Maksim Shamihulau
  • 1,219
  • 1
  • 15
  • 17
  • Layout groups were especially made for this, why don't you want to use tools provided ? This is like asking how to boil water without heating it. – Stephane Vanraes Dec 20 '22 at 06:42
  • 2
    @StephaneVanraes it's needed for just one page(or two) and I don't want to create a complicated structure to overcome such limitations. Thought that I overlooked something in this regards that's why I'm asking here. – Maksim Shamihulau Dec 20 '22 at 15:58
  • @MaksimShamihulau Hii, did you find any good solution for this ? I am facing the same problem, and I could nt find any solution without using layout groups (so far). and btw you can ask anything you want even "how to boil water without heating it ?" >> "reduce the pressure over the water and it will boil" – Marik Ishtar Apr 27 '23 at 21:59

4 Answers4

1

As Stephane has mentioned in comment, you need layouts group. To quote the docs on breaking out of layouts:

If you want some pages to have a different layout hierarchy than the rest, then you can put your entire app inside one or more groups except the routes that should not inherit the common layouts.

In example below home page / will use layout from (app) folder, but /admin will not inherit it.

src/routes/
│ (app)/
│ ├ dashboard/
│ ├ +page.svelte
│ └ +layout.svelte
├ admin/
└ +page.svelte

Read more here https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group

Michal S
  • 1,104
  • 17
  • 26
0

This is certainly doable with some CSS tricks. Refer to the following post for a good solution: Is there a way to make a child DIV's width wider than the parent DIV using CSS?.

The simplest solution is to drop in a +layout.svelte file with the following contents:

<main>
  <slot />
</main>

<style>
  main {
    height: 100vh;
    width: 100vw;
    position: relative;
    left: calc(-50vw + 50%);
  }
</style>

This can be done with any container in the current context of the svelte component, too.

acmiyaguchi
  • 1
0

You can't break out of the root layout. You can do some CSS overriding, though I wouldn't call that "elegant." Building off of acmiyaguchi's answer, I found that this worked better for me:

+layout.svelte

<main>
  <slot />
</main>

<style>
  main {
    height: 100vh;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
</style>
Ac Hybl
  • 397
  • 3
  • 10
0

You can hide your root layout using stores:

Define store in: src/lib/stores/ui.ts

import {writable} from "svelte/store";

export let showLayout = writable(true)

Add condition to layout in src/routes/+layout.svelte

<script lang="ts">
    import {showLayout} from "$lib/stores/ui";
</script>

{#if ($showLayout)}
    <div class="layout">
        <slot />
    </div>
{:else}
    <slot />
{/if}

Simply toggle layout off in your page src/routes/subpage/+page.svelte

<script lang="ts">
    import {showLayout} from "$lib/stores/ui";

    $showLayout = false
</script>
BL4CKW0LF
  • 1
  • 1