TextBox overflow on Pavlovia

Online experiments
1

URL of experiment: Pavlovia

Description of the problem:

Hi!
I’ve noticed that the overflow attribute of the TextBox component works fine on local, but it is not working properly on Pavlovia when set to “visible” nor “scroll”. Instead, it looks like it was set to “hidden”. Is there a way to get the same behavior as in local?
I’ve checked on different browsers and it didn’t work. I’m using the builder, psychopy 2024.2.0.
Thanks!!

2

I’m having the same issue. Did you find a solution?

3

I actually just found a solution:

Add a routine before the routine with the texbox component with the following code component:

set code type to both, insert at before experiment:

function enableScrollableTextBox(textBox) {
  if (textBox && !textBox._scrollPatchApplied && textBox._pixi && textBox._pixi.htmlInput) {
    textBox._pixi.setInputStyle("overflow", "auto");
    textBox._pixi.setInputStyle("overflowY", "auto");
    textBox._pixi.setInputStyle("overflowX", "hidden");
    textBox._pixi.setInputStyle("pointerEvents", "auto");
    textBox._pixi.setInputStyle("userSelect", "text");
    textBox._pixi.setInputStyle("webkitUserSelect", "text");
    textBox._pixi.setInputStyle("touchAction", "pan-y");
    textBox._pixi.setInputStyle("webkitOverflowScrolling", "touch");

    textBox._pixi.setInputStyle("whiteSpace", "pre-wrap");
    textBox._pixi.setInputStyle("overflowWrap", "break-word");
    textBox._pixi.setInputStyle("wordBreak", "normal");
    textBox._pixi.setInputStyle("display", "block");

    textBox._pixi.htmlInput.addEventListener("wheel", function(event) {
      event.stopPropagation();
    });

    textBox._scrollPatchApplied = true;
  }
}

then add a code component in each routine where you want a scrollable textbox after the textbox component:

if (myTextBox.status === PsychoJS.Status.STARTED) {
  enableScrollableTextBox(myTextBox);
}