Survey Creator doesn't render all the questions

[abrah-am]

Are you requesting a feature, reporting a bug or ask a question?

Reporting what seems to be a bug.

What is the current behavior?

A survey with several pages and questions has been created. When rendering the Survey Creator, the designer only shows a partial subset of the questions. The rest of the questions are invisible. If a new question is added or deleted, then the other questions show.

What is the expected behavior?

I expect to see all the questions that have been added to the Survey when rendering.

How would you reproduce the current behavior (if this is a bug)?

import {
  BCard, BForm, BRow, BCol, BFormGroup, BFormInput,
  BOverlay, BButton,
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
// eslint-disable-next-line import/no-extraneous-dependencies
import { surveyLocalization } from 'survey-core'
import { SurveyCreator } from 'survey-creator-knockout'
// eslint-disable-next-line import/no-extraneous-dependencies
import { editorLocalization } from 'survey-creator-core'
// eslint-disable-next-line import/no-extraneous-dependencies
import 'survey-creator-core/survey-creator-core.i18n'

// eslint-disable-next-line import/no-extraneous-dependencies
import 'survey-core/defaultV2.min.css'
// eslint-disable-next-line import/no-extraneous-dependencies
import 'survey-creator-core/survey-creator-core.min.css'
import axios from '@axios'
import { required } from '@validations'
import { ValidationProvider, ValidationObserver } from 'vee-validate'

Instantiation and rendering

    this.creator = new SurveyCreator(this.creatorOptions)
    this.creator.text = this.survey.json
    this.creator.saveSurveyFunc = (saveNo, callback) => {
      localStorage.setItem('current-survey', this.creator.text)
      callback(saveNo, true)
      this.isSaved = false
    }
    this.creator.render('surveyCreator')

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

Specify your

browser: Chrome browser version: Version 121.0.6167.139 ( surveyjs platform (angular or react or jquery or knockout or vue): Vue 2.7.0 surveyjs version: "survey-creator-knockout": "^1.9.128", "survey-vue-ui": "^1.9.128",

[abrah-am]

Additional information. I have been playing with the component, and I noticed that if I zoom out, I can see one of the other questions that I couldn't see before. This makes me think that the Survey Creator might be using some lazy loading that only loads the questions that are visible. However, if I scrolldown, I still do not see the rest of the questions.

I hope this additional information can narrow down the issue.

[JaneSjs]

Hi @abrah-am, If you use the latest version of SurveyJS, please update your package list and use the survey-creator-knockout and survey-knockout-ui packages. View CodeSandbox

"survey-core": "latest",
"survey-creator-core": "latest",
"survey-creator-knockout": "latest",
"survey-knockout-ui": "latest",

Please let me know if this fixes the issue.

Thanks

[abrah-am]

@JaneSjs Thanks, unfortunately, it didn't fix it. However, I noticed that if I add the CSS style below, all the questions are rendered correctly.

<style scoped>
#surveyCreator {
  height: 100vh;
  width: 100vw;
}
</style>

I will do more validation and if I do not see the issue anymore, I will close it.

Thanks for your quick response.

[JaneSjs]

Thank you for the update, @abrah-am. Please drop me a line if you have any further questions.