vertical align of radio buttons

Plus d'informations
il y a 2 mois 1 semaine - il y a 2 mois 1 semaine #183051 par 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
Dernière édition: il y a 2 mois 1 semaine par matspa.

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 2 mois 1 semaine #183060 par matspa
Réponse de matspa sur le sujet 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:
.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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 1 semaine #183064 par tpartner
Réponse de tpartner sur le sujet 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.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 1 semaine - il y a 2 mois 1 semaine #183067 par matspa
Réponse de matspa sur le sujet 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:
.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;
 
}
Dernière édition: il y a 2 mois 1 semaine par matspa.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 1 semaine #183071 par Joffm
Réponse de Joffm sur le sujet 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


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

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!