Skip to content

Canvas: No Scrolling

What are we learning here?

  • Canvas components do not have a scroller

We use two examples to illustrate the difference to a component based on the Canvas class instead of a component based on the Widget class.

The first and most important difference is the lack of scroll functionality. A canvas is just a simple non-scrollable and not overflowing container.

We will create a completely new application with a CSS file, a HTML template and a canvas component in a new folder:

src/demo/apps/canvas-vs-widget-scroll/content.module.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
:local(.widget) {
   padding: 20px;
   & h2 {
      text-decoration: underline dotted gray;
   }
   & .arrow {
      opacity: 0.5;
      position: absolute;
      color: red;
   }
   & .left {
      top: 50%;
      transform: translate(0, -100%);
      left: 0;
   }
   & .right {
      top: 50%;
      transform: translate(0, -100%);
      right: 0;
   }
   & .up {
      left: 50%;
      transform: translate(-50%, 0);
      top: 0;
   }
   & .down {
      left: 50%;
      transform: translate(-50%, 0);
      bottom: 0;
   }
}

src/demo/apps/canvas-vs-widget-scroll/content.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<h2>Canvas cannot scroll!</h2>
<div class="mt-2 card">
   <div class="card-header">
      Adding Content
      <button class="btn btn-xs btn-success" data-role="text-plus">
         <i class="fas fa-plus"></i>
      </button>
      <button class="btn btn-xs btn-danger" data-role="text-minus">
         <i class="fas fa-minus"></i>
      </button>
   </div>
   <div data-role="content" class="card-body"></div>
</div>
<div class="arrow left"><i class="fas fa-chevron-circle-left"></i></div>
<div class="arrow right"><i class="fas fa-chevron-circle-right"></i></div>
<div class="arrow up"><i class="fas fa-chevron-circle-up"></i></div>
<div class="arrow down"><i class="fas fa-chevron-circle-down"></i></div>

src/demo/apps/canvas-vs-widget-scroll/content.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { Canvas } from "@codecoupler/cc-ui";
import template from "./content.html";
import style from "./content.module.css";
export default class extends Canvas {
   async start() {
      this.element.innerHTML = template;
      this.element.classList.add(style.widget);
      let contentEl = this.element.querySelector("[data-role=content]");
      let addText = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr";
      this.element
         .querySelector("[data-role=text-plus]")
         .addEventListener("click", () => {
         contentEl.insertAdjacentHTML("beforeend", `<p>${addText}</p>`);
         });
      this.element
         .querySelector("[data-role=text-minus]")
         .addEventListener("click", () => {
         Array.from(contentEl.getElementsByTagName("p")).at(-1)?.remove();
         });
   }
}

src/demo/apps/canvas-vs-widget-scroll/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
   static defaults = {
      "@codecoupler": {
         panel: {
            panelSize: "640 510",
            headerTitle: "Compare Canvas vs. Widget"
         }
      }
   };
   async start() {
      await this.stage.load(Content);
   }
}

We load the new application in our root.js file (just by replacing the previous one):

src/root.js

1
2
3
4
5
6
7
import { Component } from "@codecoupler/cc-ui";
import TestApp from "./demo/apps/canvas-vs-widget-scroll";
export default class extends Component {
  async start() {
    await this.stage.load(TestApp);
  }
}

You see now an application with button to add or remove content like before. But if you add text into the content area you cannot scroll.