Coder Social home page Coder Social logo

Comments (5)

milahu avatar milahu commented on May 16, 2024

add style?

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

from svelte-layout-resizable.

centratelemedia avatar centratelemedia commented on May 16, 2024

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

from svelte-layout-resizable.

milahu avatar milahu commented on May 16, 2024
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

from svelte-layout-resizable.

centratelemedia avatar centratelemedia commented on May 16, 2024

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

from svelte-layout-resizable.

milahu avatar milahu commented on May 16, 2024

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

from svelte-layout-resizable.

Related Issues (4)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.