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
  • niwong's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175571 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago #175611 by tpartner
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
  • niwong's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175620 by niwong
Using the base Vanilla survey theme.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago - 5 years 5 months ago #175732 by tpartner
Try updating to the latest version. This is what I see using the vanilla theme in version 3.15.1.


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
  • niwong's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175785 by niwong
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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago #175787 by tpartner
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
  • niwong's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175788 by niwong
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 5 months ago - 5 years 5 months ago #175794 by tpartner
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
  • niwong's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 5 months ago #175818 by niwong
Thanks for your help Tony, that worked perfectly.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose