vertical align of radio buttons

Mehr
2 Monate 1 Woche her - 2 Monate 1 Woche her #183051 von 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
Letzte Änderung: 2 Monate 1 Woche her von matspa.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Monate 1 Woche her #183060 von 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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Monate 1 Woche her #183064 von 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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Monate 1 Woche her - 2 Monate 1 Woche her #183067 von 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;
 
}
Letzte Änderung: 2 Monate 1 Woche her von matspa.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
2 Monate 1 Woche her #183071 von 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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha