svelte-layout-resizable
svelte-layout-resizable copied to clipboard
doesnot work on SvelteKit
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>
add style?
https://github.com/milahu/svelte-layout-resizable#style
@milahu i have added style after above script..., but this working on svelte not sveltekit
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:
<main>
element:
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:
keywords:
- sveltekit 100vh
- sveltekit use full height of browser window
- sveltekit css frames layout
@milahu thank it work, but howto apply border in certain column or row,?
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