- Posts: 77
- Thank you received: 0
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
- Senior Member
Less
More
2 years 9 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.
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.
Attachments:
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12790
- Thank you received: 3940
2 years 9 months ago - 2 years 9 months ago #217422
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 77
- Thank you received: 0
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,
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,
Attachments:
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12790
- Thank you received: 3940
2 years 9 months ago #217438
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Move or hide selection box in multiple option
And I see this,
when I
And you put this into the template.css?
But as I mentioned before:
You should really consider an update.
Joffm
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
- Senior Member
Less
More
- Posts: 77
- Thank you received: 0
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,
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
- Senior Member
Less
More
- Posts: 77
- Thank you received: 0
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
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.