vertical align of radio buttons

More
2 months 1 week ago - 2 months 1 week ago #183051 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
Last edit: 2 months 1 week ago by matspa.

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
2 months 1 week ago #183060 by matspa
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:
.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

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #183064 by tpartner
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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago - 2 months 1 week ago #183067 by matspa
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:
.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: 2 months 1 week ago by matspa.

Please Log in or Create an account to join the conversation.

More
2 months 1 week ago #183071 by Joffm
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


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!