- Posts: 3
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
vertical align of radio buttons
- matspa
- Topic Author
- Offline
- New Member
Less
More
5 years 1 week ago - 5 years 1 week ago #183051
by matspa
vertical align of radio buttons was created by matspa
Hi Forum,
I changed the font size of the entire site. After that, the radio buttons don`t align verticaly.
See screenshot here:
Edit: (It is not possible to add a dropbox link as raw, so please click on the picture if not shown)
I am not able to change css to make it fit.
Also, if you look at the first button, is it possible to change the color of the border whitch appears if you select it?
I am using Version 3.16.1+190314 with the bootswatch template.
Thanks in advance!
Martin
I changed the font size of the entire site. After that, the radio buttons don`t align verticaly.
See screenshot here:
Edit: (It is not possible to add a dropbox link as raw, so please click on the picture if not shown)
I am not able to change css to make it fit.
Also, if you look at the first button, is it possible to change the color of the border whitch appears if you select it?
I am using Version 3.16.1+190314 with the bootswatch template.
Thanks in advance!
Martin
Last edit: 5 years 1 week ago by matspa.
The topic has been locked.
- matspa
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
5 years 1 week ago #183060
by matspa
Replied by matspa on topic vertical align of radio buttons
I found a solution for the position but the problem with the frame when i click on the button still exists.
does anyone have a solution for this?
here the css for the position:
Thanks Martin
does anyone have a solution for this?
here the css for the position:
Code:
.radio-item label:before { content: " "; display: inline-block; position: relative; top: 3px; margin: 0 5px 0 0; width: 20px; height: 20px; border-radius: 11px; border: 2px solid #fff; background-color: transparent; } .radio-item label::after { left: 29px; } .radio-item input[type=radio]:checked + label:after { border-radius: 11px; width: 12px; height: 12px; position: absolute; top: 7px; left: 29px; content: " "; display: block; background: #fff; }
Thanks Martin
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 1 week ago #183064
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 vertical align of radio buttons
It is impossible to debug through an image. Can you give a link to a live sample survey?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- matspa
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
5 years 1 week ago - 5 years 1 week ago #183067
by matspa
Replied by matspa on topic vertical align of radio buttons
No, sorry... i would get some problems if i showed the survey and the layout.
but i copied some code form a bootstrap site and changed the whole thing. now it works, but i dont know why...
Thanks anyway!
here the css i used:
but i copied some code form a bootstrap site and changed the whole thing. now it works, but i dont know why...
Thanks anyway!
here the css i used:
Code:
.container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #AAAAAA; display: block; position: relative; float: left; width: 100%; height: 50px; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #FFFFFF; } ul li .check{ display: block; position: absolute; border: 5px solid #AAAAAA; border-radius: 100%; height: 25px; width: 25px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 5px solid #FFFFFF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #0DFF92; } input[type=radio]:checked ~ .check::before{ background: #0DFF92; } input[type=radio]:checked ~ label{ color: #fff; }
Last edit: 5 years 1 week ago by matspa.
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12881
- Thank you received: 3965
5 years 1 week ago #183071
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic vertical align of radio buttons
We don't want to see your actual survey.
Asking for a sample is for a survey with some dummy questions, but which show your problem and your tries to solve.
Joffm
Asking for a sample is for a survey with some dummy questions, but which show your problem and your tries to solve.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.