- 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
-
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
-
- modernity4r
-
Topic Author
- Offline
- Senior Member
-
- tpartner
-
- Away
- LimeSurvey Community Team
-
- tpartner
-
- Away
- LimeSurvey Community Team
-
6 months 22 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.
Please Log in to join the conversation.
- modernity4r
-
Topic Author
- Offline
- Senior Member
-