Skip to content
Snippets Groups Projects
Select Git revision
  • 9bfa77dc65db00cbb847763196fd679412a3192c
  • master default protected
  • 1.31
  • 4.38.7
  • 4.38.6
  • 4.38.5
  • 4.38.4
  • 4.38.3
  • 4.38.2
  • 4.38.1
  • 4.38.0
  • 4.37.2
  • 4.37.1
  • 4.37.0
  • 4.36.0
  • 4.35.0
  • 4.34.1
  • 4.34.0
  • 4.33.1
  • 4.33.0
  • 4.32.2
  • 4.32.1
  • 4.32.0
23 results

231.html

Blame
    • Volker Schukai's avatar
    chore: add issue example #233
    Volker Schukai authored
    a9a93525
    History
    Volker Schukai's avatar a9a93525
    History
    231.html 10.97 KiB 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The content control table of contents does not scroll with the content. #231</title>
    <script src="./231.mjs" type="module"></script>
</head>
<body>

<h1>The content control table of contents does not scroll with the content. #231</h1>
<p>you can see it on monsterjs.org. you click on a point and the page scrolls down. so far so good. but the control should scroll with it.</p>
<ul>
    <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/231">Issue #231</a></li>
    <li><a href="/">Back to overview</a></li>
</ul>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>

<main style="display:block;height:500px">
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    <div style="display:flex;height:400px;overflow:auto">

        <monster-table-of-content>
            <div style="padding:45px">
                <h1>Headline 1</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                        amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <h2>Hedline 2-1</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <h2>Hedline 2-2</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <h2>Hedline 2-3</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <h3>Hedline 3-1</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <ul>
                    <li>This is a css test list</li>
                    <li>This is a css test list</li>
                    <li>This is a css test list</li>
                </ul>

                <h3>Hedline 3-2</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                        amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <h2>Hedline 2-4</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                    et
                    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
                    amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no
                    sea takimata sanctus est Lorem ipsum dolor sit amet.</p>


                <hr>
                <p><strong>ENDE</strong></p>
            </div>
        </monster-table-of-content>


    </div>
         

    <div style="display: block;clear: both;">sdfasdf
        <hr>
    </div>
    sdfaasdf<br>
        sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br> sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>
    sdfaasdf<br>


</body>
</html>