Question T10156
Visible to All Users

Switches in sidebar are broken if defaultV2.css is imported

created 2 years ago (modified 2 years ago)

[Ticket cloned from T10150: Survey creator language change not updating error messages]

Found one more problem:
If I do
import 'survey-core/defaultV2.css';
To use this theme for preview it breaks .sd-boolean__switch styles - if I open general sidebar panel I can't do nothing with it because of this stules:

CSS
display: flex; padding: calc(0.5 * var(--base-unit, 8px)); align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: calc(12.5 * var(--base-unit, 8px));
Show previous comments (5)

    Hello,

    It's a bug indeed, we'll fix it and update this thread immediately.

    Olga,
    SurveyJS Team

      Thank You, Olga!

      I found that problem with replacing checkbox by boolean reproduces only in Storybook project. Then I import same component in App everything works as expected. Maybe You have an example of Storybook setup?

      Maybe I need to create separate ticket for this problem?

        We don't have an example of setup the Storybook.
        I produced this bug in our online demos without the Storybook. Thanks, there's nothing else to do.

        Answers approved by surveyjs Support

        created 2 years ago (modified 2 years ago)

        Hello,

        We've fixed the issue via these pull requests: https://github.com/surveyjs/survey-creator/pull/3316, https://github.com/surveyjs/survey-library/pull/4653.
        The problem was in two parts:

        1. some css definitions from defaultV2 theme were applied on legacy default theme and modern theme
        2. boolean question rendered incorrectly without StylesManager.applyTheme call in modern theme.

        Also, please be sure that you called StylesManager.applyTheme("your-theme") in your storybook.

        Thanks,
        Dmitry
        SurveyJS Team