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

More

7 years 6 months ago - 7 years 6 months 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

Last edit: 7 years 6 months ago by matspa.

The topic has been locked.

matspa
Topic Author
Offline
New Member

More

7 years 6 months 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:

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

More

7 years 6 months ago #183064 by tpartner

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

More

7 years 6 months ago - 7 years 6 months 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:

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: 7 years 6 months ago by matspa.

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

7 years 6 months ago #183071 by Joffm

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

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

The topic has been locked.

Moderators: tpartner, holch

Powered by Kunena Forum

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

vertical align of radio buttons

Lime-years ahead

Legal

About Us

Open Source