content not centering with resize plugin?

[becky-gilbert]

Hi! I'm having trouble with the page content sometimes not centering after using the resize plugin, and wonder if someone has experience with this problem and could help me out. When the screen resolution is relatively low and the content needs to be scaled down in size, I'm finding that after using the resize plugin, the content isn't centered on the page - instead, it's pushed down the page and/or to the left, and the user has to scroll to see all of the content. This happens despite the fact that the jspsych-content div is smaller than the visible window (after rescaling) and could therefore be centered inside of it. Here's a minimal example:

  var resize = {
    type: 'resize',
    item_width: 3 + 3/8,
    item_height: 2 + 1/8,
    prompt: "<p>Before we start, let's measure your screen so we can display the game correctly.</p>" +
    "<p>First, grab a credit card. Then, click and drag the lower right corner of the box " +
    "until the box is the same size as the credit card held up to the screen.</p>" +
    "<p>Finally, press the button below.</p>",
    button_label: 'Continue',
    pixels_per_unit: 128
  };

  var trial = {
    type: 'html-keyboard-response',
    stimulus: '<div style="width:1000px; height: 720px; background: black;"></div>'
  }

  jsPsych.init({
    timeline: [resize,trial]
  });

This works fine for me when I use a high resolution setting on my laptop screen - the black square is centered on the screen in the next trial.

When I reduce my computer's screen resolution, the resize trial content is bigger, and so the resulting scale_factor computed by the resize plugin is below 1, which correctly reduces the size of the content on the subsequent trials. But when I do this, the content isn't centered when the page loads, even though it's small enough to fit inside the visible window - rather, it appears lower down the page, along with scroll bars.

As you can see in the console above, the clientHeight of the body is 650px, and although the clientHeight of the jspsych-content div is 720px, I think this is the value before scaling. After scaling the size down, the jspsych-content div height is about 600px, which should fit on the 650px page. So I wonder if what's happening is that the margin: auto property of the jspsych-content div is auto-positioning it using the original/unscaled size, and then after the content is scaled down, it's not re-centered.

And just to show that the black square does fit on the page, here's what it looks like after I scroll down a bit:

Has anyone else noticed this happen when using the resize plugin, or maybe there's something unusual about the way that I'm using it? And does anyone have suggestions for how to get the content to center correclty when the page loads?

Thanks!!

[rahul-psych]

Hello! I'm having the exact same problem with one of my test participants - a student kept having this problem on her HP Pavilion 14 inch laptop. I'm pretty amateur in my js skills so have no idea. Did you find a solution?