Cannot scroll in survey - React

safwanyp

created 2 years ago

Hi,

I built a basic survey in React, and it looks fine, but I am not able to scroll at all in the page.

I tried wrapping the survey inside of a div and enabling scroll on the div, but that didn't help either.

Please help. I have to deploy this app ASAP.

Show previous comments (5)

Jane 2 years ago

Hello,
Do you see any errors in the browser console? Would you please share a demo?

safwanyp 2 years ago

No errors in the console.

I'm using NextJS as well, and for some reason I'm not able to create a demo on Plunkr or CodeSandbox.

It's the same code as on the sandbox on this page, except that my JSON is longer.

safwanyp 2 years ago

JavaScript
import 'survey-core/defaultV2.min.css';
import { StylesManager, Model } from 'survey-core';
import { Survey } from 'survey-react-ui';

StylesManager.applyTheme("defaultV2");

const surveyJson = {
  elements: [
{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, 
  {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  },
  {
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, 
  {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  },
  {
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, 
  {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  },
  {
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, 
  {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  },

]
};

function Quest() {
  const survey = new Model(surveyJson);

  return <Survey model={survey} />;
}

export default Quest;

This is the exact code I'm using.

Jane 2 years ago

Thank you for sharing this sample. I run it in Code Sandbox and got no problem scrolling the survey: https://codesandbox.io/s/condescending-villani-hpj6mg?file=/src/index.js.

Please check it on your side and let me know your results.

safwanyp 2 years ago

It doesn't work. I dont know what the problem is.

The survey can be seen, but only the first few questions. It does not let me scroll.

I'm using Next.JS and disabled Server side rendering for the Survey component to make sure there are no errors.

Please help.

Jane 2 years ago

Hello,
Thank you for the clarification. I should say that we haven't tested how SurveyJS Form Library would perform with Next.JS. Theoretically, disabling server-side rendering should help.

JavaScript
const SSR = typeof window === "undefined";

function SurveyComponent() {
  const survey = new Model(json);
  if (!SSR) return <Survey model={survey} />;
  else return <div></div>;
}

Example.
Please let me know if the above code changes anything.

safwanyp 2 years ago

Hi Jane,

I already disabled SSR and I'm facing this issue.

One thing that I have noticed is that after removing the styling by commenting the StylesManager.applyTheme("defaultV2"); line, I can see the scrollbar. Even though it's in a small section of the page, the scrollbar works. Please check attached gif to see the change.

2022-11-03...-44-53.gif

Jane 2 years ago

Hello,
Thank you for sharing this video. Perhaps, CSS styles defined at your application level affect survey styling. I would suggest that you research the survey styles using browser developer tools. If you require assistance, please share a reproducible demo for research.

Cannot scroll in survey - React

Recently viewed tickets