Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Move or hide selection box in multiple option

Mon2016
Topic Author
Offline
Premium Member

More

4 years 2 months ago #217394 by Mon2016

Move or hide selection box in multiple option was created by Mon2016

Hello everybody,

I am conducting a shelf survey.
For the replacement question of your preferred product I am designing it as a multiple choice with a css class.

But when I show it, I feel that the selection box makes them confused about which product they are selecting since, as it is on the left, a lot is lost.

Is there a way that this box can be moved at the bottom of each image?

Or is there some other way that you can put something like a box in each answer option to distinguish which product is the one you are selecting?

I am attaching a lss survey file for a clearer idea.

The version where I am conducting the survey is Version 2.50

Thanks for your help.

Greetings to all.

...vey_749474.lss

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

4 years 2 months ago - 4 years 2 months ago #217422 by Joffm

Replied by Joffm on topic Move or hide selection box in multiple option

Hi,
you are using a really "old" version,
This (2.50) was the very first release of this branch (2.50/2.73), which was really buggy at the beginning.

Well, since version 3.x there is the question theme "image-select"

In 2.50 you can try this.
Question of type multiple with 4 columns
css class "blo"
And this css in the template.css.
[code type=css].blo input[type=checkbox] + label+div {
color: #000;
padding: 10px;
border: 1px solid #f1f1f1;
margin-left: -20px !important;
}
.blo input[type=checkbox]:checked + label+div {
color:white;
background-color: #C18D00;
font-style: normal;
padding: 10px;
border: 1px solid #0e3e63;
margin-left: -20px !important;
}
.blo input[type=checkbox]:disabled + label+div {
color: #aaa;
background-color: #EEE;
font-style: normal;
padding: 10px;
border: 1px solid #eee;
margin-left: -20px !important;
cursor: not-allowed;
}

.blo .checkbox label::before {
visibility: hidden !important;
}
.blo .checkbox label::after {
visibility: hidden !important;
}

Joffm

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

Last edit: 4 years 2 months ago by Joffm.

The topic has been locked.

Mon2016
Topic Author
Offline
Premium Member

More

4 years 2 months ago #217437 by Mon2016

Replied by Mon2016 on topic Move or hide selection box in multiple option

Thank you very much Joffm,

I have performed the exercise as shown in your image, however I could not have the design that you share with me.

I pasted the css class that you kindly share as is, but I don't know if I did something wrong when pasting it.

I share the image of what is achieved by pasting it

and I also share the lss file of my survey.

I hope you can help me,

I really appreciate your time and your great help again.

Greetings,

...749474 (1).lss

The topic has been locked.

Joffm
Offline
LimeSurvey Community Team

More

4 years 2 months ago #217438 by Joffm

Replied by Joffm on topic Move or hide selection box in multiple option

And I see this,
when I

remove all the unnecessary <span> and <p> tags
reduce the width and height by 10%: width 144px; height: 135px;

And you put this into the template.css?

Code:

.blo input[type=checkbox] + label+div {
color: #000;
padding: 10px;
border: 1px solid #f1f1f1;
margin-left: -20px !important;
}
.blo input[type=checkbox]:checked + label+div {
color:white;
background-color: #C18D00;
font-style: normal;
padding: 10px;
border: 1px solid #0e3e63;
margin-left: -20px !important;
}
.blo input[type=checkbox]:disabled + label+div {
color: #aaa;
background-color: #EEE;
font-style: normal;
padding: 10px;
border: 1px solid #eee;
margin-left: -20px !important;
cursor: not-allowed;
}
 
.blo .checkbox label::before {
visibility: hidden !important;
}
.blo .checkbox label::after {
visibility: hidden !important;
}

But as I mentioned before:
You should really consider an update.

Joffm

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

The topic has been locked.

Mon2016
Topic Author
Offline
Premium Member

More

4 years 2 months ago #217444 by Mon2016

Replied by Mon2016 on topic Move or hide selection box in multiple option

Thanks Joffm,

If I put the css in the template as I show you in my image

But something is not working.

Could you help me share the lss with the structure you use?

I know that I have to update, but in this version I had done this survey and I wanted to use it again, but if it causes me conflict that my answers are not completely correct.

Thanks once again.

Greetings,

The topic has been locked.

Mon2016
Topic Author
Offline
Premium Member

More

4 years 2 months ago #217450 by Mon2016

Replied by Mon2016 on topic Move or hide selection box in multiple option

Hello,

One option that occurs to me is to be able to separate each column with a vertical line to separate each column so that the images are not stacked, or something like being able to put a margin to the entire answer option so that it is not confused.

You will notice that I do not have the slightest knowledge of Java or Css to execute this idea, I don't know if this is possible

Somebody could help me?Thanks

The topic has been locked.