- Posts: 18
- Thank you received: 2
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Not able to alignment List (radio) button with the text in LS 3
- niwong
- Topic Author
- Offline
- New Member
Less
More
5 years 5 months ago #175571
by niwong
Not able to alignment List (radio) button with the text in LS 3 was created by niwong
I have a List (radio) question type and I want to align the radio button with the text (in this case lowering it). I'm not able to do this in LS 3, but was able to in LS 2.5.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
5 years 5 months ago #175611
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 Not able to alignment List (radio) button with the text in LS 3
What theme are you using? Can you provide a screenshot?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- niwong
- Topic Author
- Offline
- New Member
Less
More
- Posts: 18
- Thank you received: 2
5 years 5 months ago #175620
by niwong
Replied by niwong on topic Not able to alignment List (radio) button with the text in LS 3
Using the base Vanilla survey theme.
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
5 years 5 months ago - 5 years 5 months ago #175732
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 Not able to alignment List (radio) button with the text in LS 3
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 5 years 5 months ago by tpartner.
The topic has been locked.
- niwong
- Topic Author
- Offline
- New Member
Less
More
- Posts: 18
- Thank you received: 2
5 years 5 months ago #175785
by niwong
Replied by niwong on topic Not able to alignment List (radio) button with the text in LS 3
I made some progress, in LS 3.0. Note: I can also make my example look aligned when
I reduce the text size from 24px to 14px.
I inspected the page in Chrome and modified the line as follows, it worked:
[added: style="line-height:15px;"]
<label style="line-height:15px;" for="answer574568X34X186A1" class="control-label radio-label">
<span style="font-size:24px;">I felt totally unsupported</span>
</label>
for image of results see: ThisWorkedRadBtn.png
for image of the code see: InspectionCodeChange.png
To implement, I've added to custom.css:
.radio-label {
line-height: 15px;
padding-top: 8px;
padding-bottom: 3px;
}
The radio button aligns with the text aligns.
However, the css override does not work the same as the direct code change:
the radio button fill dot position remains unchanged, therefore making it not in the center.
see ResultsWithmodCss.png
I'm not able to make the fill dot move down, when option is clicked.
I reduce the text size from 24px to 14px.
I inspected the page in Chrome and modified the line as follows, it worked:
[added: style="line-height:15px;"]
<label style="line-height:15px;" for="answer574568X34X186A1" class="control-label radio-label">
<span style="font-size:24px;">I felt totally unsupported</span>
</label>
for image of results see: ThisWorkedRadBtn.png
for image of the code see: InspectionCodeChange.png
To implement, I've added to custom.css:
.radio-label {
line-height: 15px;
padding-top: 8px;
padding-bottom: 3px;
}
The radio button aligns with the text aligns.
However, the css override does not work the same as the direct code change:
the radio button fill dot position remains unchanged, therefore making it not in the center.
see ResultsWithmodCss.png
I'm not able to make the fill dot move down, when option is clicked.
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
5 years 5 months ago #175787
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 Not able to alignment List (radio) button with the text in LS 3
Can you give a link to a sample survey so we can see the source?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- niwong
- Topic Author
- Offline
- New Member
Less
More
- Posts: 18
- Thank you received: 2
5 years 5 months ago #175788
by niwong
Replied by niwong on topic Not able to alignment List (radio) button with the text in LS 3
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
5 years 5 months ago - 5 years 5 months ago #175794
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 Not able to alignment List (radio) button with the text in LS 3
Add this to the end of custom.css:
Code:
.radio-item label::after { top: 11px; }
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 5 months ago by tpartner.
The topic has been locked.
- niwong
- Topic Author
- Offline
- New Member
Less
More
- Posts: 18
- Thank you received: 2
5 years 5 months ago #175818
by niwong
Replied by niwong on topic Not able to alignment List (radio) button with the text in LS 3
Thanks for your help Tony, that worked perfectly.
The topic has been locked.