- Posts: 107
- Thank you received: 4
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Horizontally Aligned Multi-Numeric inputs
- Matadeleo
- Topic Author
- Offline
- Premium Member
Less
More
6 years 7 months ago - 6 years 7 months ago #158394
by Matadeleo
Horizontally Aligned Multi-Numeric inputs was created by Matadeleo
Hi, I'm trying to change the layout of a specific question (not all questions of the same question-type by editing the base code)
I'm trying to change the input boxes from being vertically aligned, to being horizontally aligned.
Here is how my question currently looks:
Here is an example of what I'm aiming for:
Does anyone have a solution for this? I've attached a survey with the question shown above in it.
I'm trying to change the input boxes from being vertically aligned, to being horizontally aligned.
Here is how my question currently looks:
Here is an example of what I'm aiming for:
Does anyone have a solution for this? I've attached a survey with the question shown above in it.
Attachments:
Last edit: 6 years 7 months ago by Matadeleo.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 7 months ago #158400
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 Horizontally Aligned Multi-Numeric inputs
You could give the question a class "display-horizontal" and add something like this to template.css. But, note that they will wrap on smaller screens.
Code:
.display-horizontal .table-multi-num, .display-horizontal .table-multi-num tbody { display: block; margin: 0; width: 100%; } .display-horizontal .answer-item { padding: 0 !important; } .display-horizontal .answer-item, .display-horizontal .answer-item td { width: auto !important; display: block; float: left; } .display-horizontal .answer-item .col-sm-6 { width: auto; padding-left: 0; } .display-horizontal .answer-item input[type="text"] { width: 50px; }
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: Matadeleo
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12940
- Thank you received: 3979
6 years 7 months ago #158403
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Horizontally Aligned Multi-Numeric inputs
The easiest way out oft the box:
array (numbers)
Regards
Joffm
array (numbers)
Regards
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- Matadeleo
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 107
- Thank you received: 4
6 years 7 months ago - 6 years 7 months ago #158409
by Matadeleo
Replied by Matadeleo on topic Horizontally Aligned Multi-Numeric inputs
Thanks tpartner, solution works well as always
I'm just trying to vertically align the text now so it matches with the input boxes:
I tried to create a css class similar to how you have done yours, and added it to the question but I think I'm doing something wrong.
I'm just trying to vertically align the text now so it matches with the input boxes:
I tried to create a css class similar to how you have done yours, and added it to the question but I think I'm doing something wrong.
Code:
.vertalign .control-label .numeric-label { vertical-align: middle; }
Last edit: 6 years 7 months ago by Matadeleo.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
6 years 7 months ago #158412
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 Horizontally Aligned Multi-Numeric inputs
You cannot use vertical-align in inline elements. Try some top margin.
Code:
.vertalign .numeric-label { margin-top: 0.75em; }
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.