jsPsych CSS Formatting

[ghost]

Hello,

I had a question about CSS formatting for jsPsych.

In jspsych.css, I noticed that when I add overflow-y: hidden; and overflow-x: hidden; to .jspsych-display-element, it works beautifully and all the excess vertical and horizontal scrollbars disappear during the experiment:

.jspsych-display-element {
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
   overflow-x: hidden;
 }

However, this also eliminates the vertical scrollbar in the demographics form at the beginning of the experiment, which is a jsPsych ‘external-html’ trial type. (This makes sense, because based on my understanding of jsPsych CSS, any rules specified in .jspsych-display-element applies to the entire experiment).

I was playing around with the CSS formatting for the demographics form, and so far I have tried:

 #demographics {
   margin: 0 auto;
   height: 110%;
   margin-top: 0;
   width: 800px;
   font-size: 100%;
   line-height: 1.5;
   text-align: left;
   overflow-y: auto;
}

and adding .jspsych-display-element to specify that I would like to change a specific jsPsych element:

.jspsych-display-element #demographics {
   margin: 0 auto;
   height: 110%;
   margin-top: 0;
   width: 800px;
   font-size: 100%;
   line-height: 1.5;
   text-align: left;
   overflow-y: auto;
}

However, I have not been able to get the vertical scrollbar to display only for the demographics form.

I was wondering if anyone has any pointers or potential solutions for how to solve this formatting issue? Any help would be much appreciated :)

(As a side note, I have two CSS sheets -- one is the jsPscyh.css and the other is the style.css, which contains the CSS for the demographics form. The jsPsych.css script is referenced before the style.css script in index.html.)

[becky-gilbert]

Hi @rmtham, I'm not sure, but I wonder if your CSS rule isn't working because it's selecting the demographics element, which I assume is contained inside the jspsych-display-element div, so the scroll bars for the container div (jsPsych display element) are still hidden. You can see what's going on by following the guidance on the Tips for Working with CSS section in the jsPsych docs, which explains how to view and modify the CSS rules for all of the elements on the page. I would check the styles for both the demographics element and jspsych-display-element div, and try changing the overflow properties to auto to see whether this causes the scroll bars to reappear.

If that is the problem - there might be a way to write a CSS selector for an element that has a specific child element, but I'm not sure how to do that. So one solution would be to write some JavaScript to change the jspsych-display-element overflow properties when your demographics trial starts, and change them back to hidden when the trial ends.

You could also try using the CSS classes parameter to modify the overflow properties specifically for your demographics trial. IIRC, this class is applied to jspsych-content, which I think is the container for jspsych-display-element, which means you could do this:

.scrollbars #jspsych-display-element {
  /* CSS rules to show scroll bars etc. */
}

And

var demographics_trial = {
  // other parameters
  css_classes: ['scrollbars']
}

I hope that helps. Let us know if you need any further guidance.