Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Change font size of multiple choice subquestions

More
8 years 2 weeks ago - 8 years 2 weeks ago #157988 by wizard2none
Change font size of multiple choice subquestions was created by wizard2none
How do you change the size of multiple choice subquestions?


Using Template: Default Template
Using LS 2.67.3 on LimeSurvey.org

I tried adding the following to the bottom of file 'template.css':
Code:
div.multiple-choice-container.subquestion-list {
    font-size: 26px;  
}
 

It increased the font, but now the check boxes no-longer align (see attachment).
Last edit: 8 years 2 weeks ago by wizard2none. Reason: Correction
The topic has been locked.
More
8 years 2 weeks ago #157991 by Joffm
Replied by Joffm on topic Change font size of multiple choice subquestions
Hi,

Add .line-height:
Code:
<style type="text/css">
div.multiple-choice-container.subquestion-list {
    font-size: 26px;
    line-height:26px;
}
</style>

Play around with the value of line-height.

See attached.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
More
8 years 2 weeks ago #157992 by wizard2none
Replied by wizard2none on topic Change font size of multiple choice subquestions
Thanks for the suggestion Joffm.

I as able to get it to work by playing with line height as you suggested.

Ended up with:
line-height:100%

With line-height:26px; or line-height:26px things were still a bit staggered.

However, as shown in the attachment, the checkmark looks a bit small now. Is there a way to increase its size?
The topic has been locked.
More
8 years 2 weeks ago #157997 by Joffm
Replied by Joffm on topic Change font size of multiple choice subquestions
Hi,
The check-icon is the font-awesome icon.

You could try to find something in the file "awesome-bootstrap-checkbox.css"
combined with this article astronautweb.co/snippet/font-awesome/

To be honest: I have no other idea.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
More
8 years 2 weeks ago - 8 years 2 weeks ago #158004 by tpartner
Replied by tpartner on topic Change font size of multiple choice subquestions
I'm not in a position to offer code this weekend but the check-boxes are ::before and ::after pseudo-elements affiliated with the labels. Changing the margins, width, height and font-size of those pseudo-elements should do the trick.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 2 weeks ago by tpartner.
The topic has been locked.
More
8 years 2 weeks ago #158008 by wizard2none
Replied by wizard2none on topic Change font size of multiple choice subquestions
Thanks, tpartner.
Tried, but didn't quite see how to do it. This isn't urgent so will wait for your insights next week.
The topic has been locked.
More
8 years 2 weeks ago #158012 by tpartner
Replied by tpartner on topic Change font size of multiple choice subquestions
Can you activate a test survey and give us a link so we can see the styles you have in place?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
8 years 2 weeks ago #158013 by wizard2none
Replied by wizard2none on topic Change font size of multiple choice subquestions
Hi Tony,

Here's the link you requested: wizard2none.limequery.com/218551
The topic has been locked.
More
8 years 2 weeks ago #158029 by tpartner
Replied by tpartner on topic Change font size of multiple choice subquestions
Add something like this to the end of template.css:

Code:
.multiple-choice-container .checkbox label::before {
    width: 24px;
    height: 24px;
}
 
.multiple-choice-container .checkbox label::after {
    width: 22px;
    height: 22px;
    padding-left: 4px;
    padding-top: 4px;
    line-height: normal;
    font-size: 16px;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • New Member
  • New Member
More
8 years 2 weeks ago #158030 by LouisGac
Replied by LouisGac on topic Change font size of multiple choice subquestions
change font size: that could be a pretty nice options for advanced template in LS3 branch...
The topic has been locked.
More
8 years 2 weeks ago #158033 by tpartner
Replied by tpartner on topic Change font size of multiple choice subquestions
The possibilities are endless :)
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
8 years 2 weeks ago #158035 by tammo
Replied by tammo on topic Change font size of multiple choice subquestions
Easy fix: use extra class like .font24 and .font18 (after defining these in .css)

More complex: offer the use a box in advanced options where you can specify font-size for this question.

Would that also be doable with new question templates?

Tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
More
8 years 2 weeks ago #158036 by wizard2none
Replied by wizard2none on topic Change font size of multiple choice subquestions
Hi Tony,

Could be close enough--but I'm getting a slightly different result than you (see attached).
The check marks are not centered in my rendering but rather placed towards the bottom of each checkbox.

I wonder why the difference. Is there something that controls the placement of the checks in the checkbox?

I tested by making a copy of the default template and adding your lines at the bottom of template.css.
The topic has been locked.
More
8 years 2 weeks ago #158037 by tpartner
Replied by tpartner on topic Change font size of multiple choice subquestions
It looks to me as if you have removed the rule that increases the font-size. The complete CSS should look like this:

Code:
/ * Larger Subquestions */
 
div.multiple-choice-container.subquestion-list {
    font-size: 26px;
    line-height:26px;
}
 
.multiple-choice-container .checkbox label::before {
    width: 24px;
    height: 24px;
}
 
.multiple-choice-container .checkbox label::after {
    width: 22px;
    height: 22px;
    padding-left: 4px;
    padding-top: 4px;
    line-height: normal;
    font-size: 16px;
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: LouisGac
The topic has been locked.
More
8 years 1 week ago #158050 by wizard2none
Replied by wizard2none on topic Change font size of multiple choice subquestions
Yep--you are right. That fixed the problem and everything looks great.

Thanks for your help.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source