Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

People saying checkbox too small

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 1 month ago #181261 by DenisChenu
Replied by DenisChenu on topic People saying checkbox too small
PS : about a11y : it's not really related to disability here, since using checkbox from OS can be better than update to another (maybe unreadable) checkbox …

I look at the bug report … updating to get same than checkbox-item are not so easy …

I make it in SkelVanilla , but not in core .
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The following user(s) said Thank You: bulgin
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 1 month ago #181272 by tpartner
Replied by tpartner on topic People saying checkbox too small
If you want to emulate the multiple-choice checkboxes (with pseudo-elements) and make it a little more visible...

1) Extend your theme.

2) Copy privacy_modal.twig and privacy_text.twig from /themes/survey/vanilla/views/subviews/privacy/ to /upload/themes/survey/your_theme/views/subviews/privacy/.

3) Modify privacy_modal.twig to something like this:

Code:
<!-- Privacy message -->
<br/>
<div class="row">
    <div class="col-sm-12 checkbox-item datasecurity-accepted-wrapper">
        <input class="{{ aSurveyInfo.class.privacydataseccheckbox }}" type="checkbox" name="datasecurity_accepted" id="datasecurity_accepted" />
        <label for="datasecurity_accepted" class="control-label {{ aSurveyInfo.class.privacydataseccheckboxlabel }}">{{ aSurveyInfo.datasecurity_notice_label }}</label>
    </div>
</div>
<div class="collapse fade" id="data-security-modal-{{aSurveyInfo.sid}}">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4 class="modal-title">{{gT('Survey data policy')}}</h4>
        </div>
        <div class="panel-body {{ aSurveyInfo.class.privacydatasecmodalbody }}">
            {{ aSurveyInfo.datasecurity_notice }}
        </div>
        <div class="panel-footer">
            <button type="button" class="btn btn-primary" onclick="$('#datasecurity_accepted').prop('checked',true).trigger('change');" data-dismiss="modal">{{gT("Accept")}}</button>
            <button type="button" class="btn btn-default" onclick="$('#data-security-modal-{{aSurveyInfo.sid}}').collapse('hide');">{{gT("Close")}}</button>
        </div>
    </div>
</div>

4) Modify privacy_text.twig to something like this:

Code:
<!-- Privacy message -->
<br/>
<div class="row">
    <div class="limit-text-window {{ aSurveyInfo.class.privacydatasectextbody }}">
        {{ aSurveyInfo.datasecurity_notice }}
    </div>
</div>
<div class="row">
    <div class="col-sm-12 checkbox-item datasecurity-accepted-wrapper">
        <input required class="{{ aSurveyInfo.class.privacydataseccheckbox }}" type="checkbox" name="datasecurity_accepted" id="datasecurity_accepted" />
        <label for="datasecurity_accepted" class="control-label {{ aSurveyInfo.class.privacydataseccheckboxlabel }}">{{ aSurveyInfo.datasecurity_notice_label }}</label>
    </div>
</div>

5) Add something like this to the end of custom.css:

Code:
.datasecurity-accepted-wrapper {
  padding-left: 45px;
    font-size: 18px;
    line-height: 24px;
}
 
.datasecurity-accepted-wrapper.checkbox-item label {
    margin-top: 15px;
    margin-bottom: 5px;
}
 
.datasecurity-accepted-wrapper.checkbox-item label::before {
    width: 24px;
    height: 24px;
    margin-left: -26px;
    border: 1px solid #cccccc;
}
 
.datasecurity-accepted-wrapper.checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: #337ab7;
}
 
.datasecurity-accepted-wrapper.checkbox-item label::after {
  padding: 0;
    width: 22px;
    height: 22px;
    margin-left: -26px;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 22px;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: DenisChenu
The topic has been locked.
  • bulgin
  • bulgin's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 1 month ago #181284 by bulgin
Replied by bulgin on topic People saying checkbox too small
Thanks Tony, that looks like a good fix. As always, very appreciative of the excellent advise offered on this forum.

Here is a question that I hope you can answer or someone might answer: I'm always a bit hesitant to play around with themes, mostly because the "installed survey themes" page is very confusing to me. I currently have on that page:

Bootswatch listed at the top as a "core" theme with "vanilla" listed under "extends".

Then a long list of extends_bootswatch as type "user theme" and also listed under Extends with a reference of bootswatch.

And then extends_extends_bootswatch, extends_fruity and extends_vanilla.

All of the aforementioned is enough to scare the daylights out of me because I honestly don't know which them is in use and the use of the repeating theme names only makes things more confusing.

For example, how do I even know which survey theme is actually in use and active?

As well if I click on theme options and then Bootstrap theme there is a drop down menu with yet another long list of themes.

I love the power and flexibility of LimeSurvey. In my view it is unparalleled. But I'm totally lost in this theme park.

Thanks.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 1 month ago - 5 years 1 month ago #181285 by tpartner
Replied by tpartner on topic People saying checkbox too small
There are only 3 core themes:

- vanilla - this is the basis for all other core themes
- bootswatch - this is an extension of vanilla
- fruity - - this is an extension of vanilla

It may be easier to think of an extended theme as a "child" theme. The "extends" value simply indicates a "parent" theme. Any files not found in the extended theme will be pulled from the parent.

If you extend any of those core themes, any files not found in your new theme directory will be loaded the parent theme(s)

bootswatch also has many Bootswatch theme options but it's best to think of these as theme variations - mostly to do with colours.

Regarding the naming, when extending a theme, you have the option to give custom names instead of the default naming structure.

More info here - manual.limesurvey.org/New_Template_System_in_LS3.x

You can see what theme is active for a given survey in the survey General Settings.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 1 month ago by tpartner.
The following user(s) said Thank You: bulgin
The topic has been locked.
  • bulgin
  • bulgin's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 1 month ago #181286 by bulgin
Replied by bulgin on topic People saying checkbox too small
Yes! That works and *it* works! It looks great! Thank you and everyone who contributed. Now my survey participants will be able to use the survey.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source