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.

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
 

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,

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?
But as I mentioned before:
You should really consider an update.

Joffm

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,

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