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
  • Mon2016's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 9 months ago #217394 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.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago - 2 years 9 months ago #217422 by Joffm
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: 2 years 9 months ago by Joffm.
The topic has been locked.
  • Mon2016
  • Mon2016's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 9 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,


The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago #217438 by Joffm
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
  • Mon2016's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 9 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
  • Mon2016's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
2 years 9 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.

Lime-years ahead

Online-surveys for every purse and purpose