- Posts: 48
- Thank you received: 2
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
two bootstrap buttons display in a line (single choice)
- modernity4r
- Topic Author
- Offline
- Senior Member
Less
More
6 months 6 days ago #251375
by modernity4r
two bootstrap buttons display in a line (single choice) was created by modernity4r
Please help us help you and fill where relevant:
Your LimeSurvey version: limesurvey cloud(6.3) / self-hosted(6.2.9_230925)
Own server or LimeSurvey hosting: Both
Survey theme/template: Fruity/Vanilla
================= am using the bootstrap button with the single choice feature to design a list of questions. It involves choosing one out of two types of lists repeatedly.Ideally, the two buttons should appear side by side on a single line, especially for better mobile responsiveness. However, they display on two separate lines on mobile, making the list elongated on smaller screens. This issue also occurs on PCs when adjusting the browser size. On larger displays, they do appear side by side as intended. If there's a recommended approach to ensure they appear on one line, I'd appreciate the suggestion.
Your LimeSurvey version: limesurvey cloud(6.3) / self-hosted(6.2.9_230925)
Own server or LimeSurvey hosting: Both
Survey theme/template: Fruity/Vanilla
================= am using the bootstrap button with the single choice feature to design a list of questions. It involves choosing one out of two types of lists repeatedly.Ideally, the two buttons should appear side by side on a single line, especially for better mobile responsiveness. However, they display on two separate lines on mobile, making the list elongated on smaller screens. This issue also occurs on PCs when adjusting the browser size. On larger displays, they do appear side by side as intended. If there's a recommended approach to ensure they appear on one line, I'd appreciate the suggestion.
Attachments:
Please Log in to join the conversation.
- mfavetti
- Offline
- New Member
Less
More
- Posts: 15
- Thank you received: 12
6 months 4 days ago #251398
by mfavetti
Replied by mfavetti on topic two bootstrap buttons display in a line (single choice)
You can just extend the survey theme you're using and modify the css.
The following user(s) said Thank You: modernity4r
Please Log in to join the conversation.
- modernity4r
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 2
6 months 21 hours ago #251560
by modernity4r
Replied by modernity4r on topic two bootstrap buttons display in a line (single choice)
Should I add it to custom.css using the theme editor? Or, should I edit the css under question edit > display > css?
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 months 20 hours ago #251563
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic two bootstrap buttons display in a line (single choice)
CSS rules should be in the custom.css file. The question setting is for CSS class names, not rules.
- manual.limesurvey.org/Question_type_-_Sh...lass_.28css_class.29
- manual.limesurvey.org/Question_type_-_Sh...lass_.28css_class.29
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 months 18 hours ago #251565
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic two bootstrap buttons display in a line (single choice)
...to add to this...
I would assign a CSS class something like "columns-2" to the question and then add something like this to your custom.css file:
I would assign a CSS class something like "columns-2" to the question and then add something like this to your custom.css file:
Code:
@media (max-width: 768px) { .columns-2 .answer-container > .container-fluid { padding: 0 8px; } .columns-2 .radio-list .bootstrap-buttons-div { padding: 0 calc(var(--bs-gutter-x)*.25); width: 50%; } .columns-2 .radio-list .bootstrap-buttons-div > div { padding: 0; } }
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: DenisChenu, modernity4r
Please Log in to join the conversation.
- modernity4r
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 2
5 months 4 weeks ago #251591
by modernity4r
Replied by modernity4r on topic two bootstrap buttons display in a line (single choice)
Thank you. I will make good use of it. I found and modified the column naming style of the button box through Chrome browser's Developer Tools, and it applies well.
Please Log in to join the conversation.