doesnot work on SvelteKit

centratelemedia commented 2 years ago

howto implement on sveltekit,? i try without success...

<script>
    import L from '$lib/components/Layout.svelte';
</script>

<L row>
    <L>cell 1 in row</L>
    <L column>
        <L>cell 2.1 in column</L>
        <L>cell 2.2 in column</L>
        <L>cell 2.3 in column</L>
    </L>
    <L>cell 3 in row</L>
</L>

milahu commented 2 years ago

add style?

https://github.com/milahu/svelte-layout-resizable#style

centratelemedia commented 2 years ago

@milahu i have added style after above script..., but this working on svelte not sveltekit

milahu commented 2 years ago

reproduce

```sh yes "" | pnpm init svelte@next my-app cd my-app pnpm install mkdir src/lib/components curl -L -o src/lib/components/Layout.svelte https://github.com/milahu/svelte-layout-resizable/raw/master/src/Layout.svelte cat >src/routes/index.svelte <<"EOF" cell 1 in row cell 2.1 in column cell 2.2 in column cell 2.3 in column cell 3 in row EOF npm run dev -- --open ```

devtools inspect:

svelte-layout-resizable--bug-in-sveltekit

<main> element:

svelte-layout-resizable--bug-in-sveltekit 2

so, the <main> element needs more height

concept for solution:

<html>
  <head>
    <style>
      body { height: 100vh; margin: 0; display: flex; flex-direction: column; }
      body > main { flex-grow: 1; }
      body > main { outline: solid 1px red; } /* debug */
    </style>
  </head>
  <body>
    <header>... header ...</header>
    <main>... main ...</main>
    <footer> ... footer ... </footer>
  </body>
</html>

result:

svelte-layout-resizable--bug-in-sveltekit 3

keywords:

sveltekit 100vh
sveltekit use full height of browser window
sveltekit css frames layout

centratelemedia commented 2 years ago

@milahu thank it work, but howto apply border in certain column or row,?

milahu commented 2 years ago

howto apply border in certain column or row,?

css classes?

see https://github.com/milahu/svelte-layout-resizable#style

example

<script>
  import L from 'svelte-layout-resizable';
</script>

<L row>
  <L>cell 1 in row</L>
  <L column class="custom-column-container">
    <L>cell 2.1 in column</L>
    <L>cell 2.2 in column</L>
    <L>cell 2.3 in column</L>
  </L>
  <L>cell 3 in row</L>
</L>

<style>
  /* layout */
  /* ... default style ... */

  :global(.layout-column.custom-column-container > .layout-cell > div > .frame) {
    /* frame color and border */
    background-color: red;
    border: solid 2px green;
  }
</style>

please use devtools to find the css selector

milahu / svelte-layout-resizable

doesnot work on SvelteKit #4