jspsych · Copilot · Oct 21, 2025 · Oct 21, 2025 · Oct 21, 2025
diff --git a/.changeset/display-element-sizing.md b/.changeset/display-element-sizing.md
@@ -0,0 +1,5 @@
+---
+"jspsych": patch
+---
+
+Add `width: 100%` and `height: 100%` to `.jspsych-content` CSS to allow plugins to use percentage-based dimensions. This enables plugins to use `height: 100%` and `width: 100%` to fill the display element. The nested DOM structure (`.jspsych-display-element` > `.jspsych-content-wrapper` > `.jspsych-content`) is preserved to maintain compatibility with the progress bar and existing plugins.
diff --git a/examples/test-height-demo.html b/examples/test-height-demo.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>jsPsych Display Element Height Test</title>
+    <script src="../packages/jspsych/dist/index.browser.js"></script>
+    <link href="../packages/jspsych/css/jspsych.css" rel="stylesheet" type="text/css" />
+    <script src="../packages/plugin-html-keyboard-response/dist/index.browser.js"></script>
+    <style>
+        /* Set a specific height for the display container to test */
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+        }
+
+        #jspsych-target {
+            height: 600px;
+            background-color: #f0f0f0;
+            border: 3px solid #333;
+        }
+
+        /* Plugin content styling to demonstrate the fix */
+        .test-content {
+            height: 100%;
+            background: linear-gradient(to bottom, #4CAF50, #2196F3);
+            color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            font-family: Arial, sans-serif;
+        }
+
+        .info-box {
+            margin-top: 20px;
+            padding: 20px;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1 style="text-align: center; padding: 20px;">jsPsych Display Element Sizing Test</h1>
+    <div id="jspsych-target"></div>
+
+    <script>
+        const jsPsych = initJsPsych({
+            display_element: 'jspsych-target',
+            show_progress_bar: true,
+            on_finish: function() {
+                document.body.innerHTML = '<div style="text-align: center; padding: 50px;"><h1>✓ Test Complete!</h1><p>The plugin content with <code>height: 100%</code> successfully filled the display element.</p></div>';
+            }
+        });
+
+        const trial = {
+            type: jsPsychHtmlKeyboardResponse,
+            stimulus: `
+                <div class="test-content">
+                    <h1>✓ Height: 100% Works!</h1>
+                    <p>This content uses height: 100% and fills the entire display element</p>
+                    <div class="info-box">
+                        <p><strong>Before the fix:</strong> This would have zero height</p>
+                        <p><strong>After the fix:</strong> It fills the 600px display container</p>
+                    </div>
+                    <p style="margin-top: 50px; font-size: 18px;">Press any key to continue</p>
+                </div>
+            `,
+        };
+
+        jsPsych.run([trial]);
+    </script>
+</body>
+</html>
diff --git a/packages/jspsych/src/index.scss b/packages/jspsych/src/index.scss
@@ -32,6 +32,8 @@
 .jspsych-content {
   text-align: center;
   margin: auto; /* this is for overflowing content */
+  width: 100%;
+  height: 100%;
 }
 
 .jspsych-top {

diff --git a/packages/jspsych/tests/core/display-element-sizing.test.ts b/packages/jspsych/tests/core/display-element-sizing.test.ts
@@ -0,0 +1,86 @@
+import { clickTarget, startTimeline } from "@jspsych/test-utils";
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+
+import { initJsPsych } from "../../src";
+
+describe("Display element sizing", () => {
+  test("jspsych-content should have the jspsych-content class", async () => {
+    const jsPsych = initJsPsych();
+
+    class TestSizingPlugin implements JsPsychPlugin<any> {
+      static info = {
+        name: "test-sizing",
+        version: "1.0.0",
+        parameters: {},
+        data: {},
+      };
+
+      constructor(private jsPsych: JsPsych) {}
+
+      trial(display_element: HTMLElement, trial: any) {
+        display_element.innerHTML = '<div id="test-content">Test</div>';
+
+        // Check that the display element has the jspsych-content class
+        expect(display_element.classList.contains("jspsych-content")).toBe(true);
+
+        // Check that it's wrapped in jspsych-content-wrapper
+        const contentWrapper = display_element.parentElement;
+        expect(contentWrapper?.classList.contains("jspsych-content-wrapper")).toBe(true);
+
+        // Check that the content wrapper is inside jspsych-display-element
+        const displayContainer = contentWrapper?.parentElement;
+        expect(displayContainer?.classList.contains("jspsych-display-element")).toBe(true);
+
+        this.jsPsych.finishTrial();
+      }
+    }
+
+    await jsPsych.run([
+      {
+        type: TestSizingPlugin,
+      },
+    ]);
+  });
+
+  test("jspsych-content-wrapper should exist with progress bar", async () => {
+    const jsPsych = initJsPsych({
+      show_progress_bar: true,
+    });
+
+    class TestProgressPlugin implements JsPsychPlugin<any> {
+      static info = {
+        name: "test-progress",
+        version: "1.0.0",
+        parameters: {},
+        data: {},
+      };
+
+      constructor(private jsPsych: JsPsych) {}
+
+      trial(display_element: HTMLElement, trial: any) {
+        // Verify progress bar exists
+        const progressBar = document.querySelector("#jspsych-progressbar-container");
+        expect(progressBar).not.toBeNull();
+
+        // Verify content wrapper still exists and has proper styling
+        const contentWrapper = display_element.parentElement;
+        expect(contentWrapper?.classList.contains("jspsych-content-wrapper")).toBe(true);
+
+        // Verify display element structure
+        const displayContainer = contentWrapper?.parentElement;
+        expect(displayContainer?.classList.contains("jspsych-display-element")).toBe(true);
+
+        // Progress bar should be a sibling of the content wrapper (both inside display element)
+        expect(displayContainer?.contains(progressBar)).toBe(true);
+
+        this.jsPsych.finishTrial();
+      }
+    }
+
+    await jsPsych.run([
+      {
+        type: TestProgressPlugin,
+      },
+    ]);
+  });
+});