Question T4221
Visible to All Users

Applying bootstrap theme leaves buttons unstyled

created 5 years ago (modified 5 years ago)

It seems that even if I place the Survey.StylesManager.applyTheme("bootstrap"); in my code while integrating the survey, the bootstrap classes (namely, btn and some other class, e.g. btn-outline-primary) are not applied to form buttons, leaving them ugly.

Is this supposed to be that way, or is it unintentional?

Also, I noticed that the custom colors I specify are not reflected in the embedding code, which means they fall back to the defaults.

Answers approved by surveyjs Support

created 5 years ago

Hello,

Here is the sample on our site of the bootstrap material theme - https://www.surveyjs.io/Examples/Library?id=bootstrap-material-theme&platform=jQuery&theme=modern

Thanks, Serge
SurveyJS Team

    created 5 years ago

    Hello,

    The CSS classes used in the bootstrap theme can be found in this file - https://github.com/surveyjs/survey-library/blob/master/src/defaultCss/cssbootstrap.ts
    As you can see SurveyJS doesn't use the btn-outline-primary class. But you can add necessary classes via code. Here is the live sample on our site - https://surveyjs.io/Examples/Library?id=survey-customcss&platform=jQuery&theme=modern#content-js

    Thanks, Serge
    SurveyJS Team

      Comments (1)

        Actually, it seems what I needed was to use the bootstrapmaterial theme instead of bootstrap. I guess the latter is Bootstrap2, and the former is Bootstrap 3/4?

        Also worth noting: the theme overrides colors of bootstrap controls by default, unless Survey.StylesManager.ThemeColors.bootstrapmaterial (the last component here is the theme name) is set to an empty object {}. But in that case, yes/no fields become invisible. To fix that, you're kinda forced to set some colors. It seems that setting the following three properties is pretty much an optimal solution:

        JavaScript
        Survey.StylesManager.ThemeColors.bootstrapmaterial = { '$main-color': '#2c3e50', '$main-hover-color': '#1e2b37', '$slider-color': '#ffffff', '$disabled-slider-color': '#cfcfcf', };

        EDIT: even better, you can use the blank object for colors if you add just a few style definitions to your CSS:

        CSS
        .sv_main .sv-boolean__switch { background: #2c3e50; /* $main-color */ } .sv_main .sv-boolean__switch:hover { background: #1e2b37; /* $main-hover-color */ } .sv_main .sv-boolean__slider { background: #ffffff; /* $slider-color */ } .sv_main .sv-boolean--disabled .sv-boolean__switch { background: #ecf0f1; /* $disabled-switch-color */ border: 1px solid #b4bcc2; /* $disabled-slider-color */ padding: 1px 2px; /* alignment fix */ } .sv_main .sv-boolean--disabled .sv-boolean__slider { background: #b4bcc2; /* $disabled-slider-color */ }