svelte-layout-resizable icon indicating copy to clipboard operation
svelte-layout-resizable copied to clipboard

Published 20 hours ago • verified publisher icon milahu

doesnot work on SvelteKit

Open centratelemedia opened this issue 2 years ago • 5 comments

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>

centratelemedia avatar Mar 26 '22 04:03 centratelemedia

add style?

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

milahu avatar Mar 26 '22 18:03 milahu

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

centratelemedia avatar Mar 26 '22 21:03 centratelemedia

reproduce 
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"
<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>

<style>
  /* layout */
  :global(body) {
    /* use full window size */
    padding: 0;
  }
  :global(.layout-cell>.middle>.center) {
    /* content cell: add scrollbars when needed */
    overflow: auto;
  }
  :global(.layout-cell>*>.frame) {
    /* frame color and border */
    /*background-color: #f4f4f4;*/
    border: solid 0.5px #a8a8a8;
  }
  :global(.layout-cell>*, .layout-cell>*>.frame) {
    /* frame size
       larger frames are better acccessible (touchscreen) */
    flex-basis: 2.5px !important;
  }
  /* use css classes on cells like
     <L class="overflow-hidden">....</L> */
  :global(.layout-cell>.middle>.center.overflow-hidden) {
    overflow: hidden !important;
  }
  /* use css classes on containers like
     <L row class="custom-row-container">....</L> */
  :global(.layout-row.custom-row-container) {
    color: orange;
  }
</style>
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

milahu avatar Mar 27 '22 09:03 milahu

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

centratelemedia avatar Apr 05 '22 00:04 centratelemedia

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 avatar Apr 05 '22 06:04 milahu