Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Multiple dependent dropdowns in one row

More
3 years 3 months ago - 3 years 3 months ago #228979 by AlexBell
Multiple dependent dropdowns in one row was created by AlexBell
Please help us help you and fill where relevant:
Your LimeSurvey version: [Version 5.2.14+220214]
Own server or LimeSurvey hosting: Out organisation hosts LimeSurvey on its servers
Survey theme/template: Vanilla
==================
Hi,
I hope this note finds you well.
I have three problems:

1.       Place three interdependent dropdown questions in one row:
The survey has 10 main questions – it needs to be All in One (on one page). Each question is a Long Free Text question followed by three dropdown lists where the first dropdown list is the Main category, and the other two lists (Subcategories) are dependent on it (main). The dropdowns need to be in one row if possible.

I also tried to use Array(Text) but could not create the dropdown dependencies.

2. Width/length of the dropdown lists:
Some of the items in the drop-down list are quite long and as a result, the text area is sticking out of the question border - is it possible to either wrap the text or shorten the text area display.

3.       Export as Printable or PDF (either would do) comes out with a broken layout (i.e. does not look neat by questions overlap, etc.).

I am trying to use Tony Partner’s code but as I cannot code, I am at my wit’s end. I would be most grateful for any help. I borrowed Tony’s code from here:
Multiple question types in array modifiy - Page 6 - LimeSurvey forums - Results from #75
Thanking you for your support.
Alex
 

File Attachment:

File Name: limesurvey... (1).lss
File Size:83.51 KB
Last edit: 3 years 3 months ago by AlexBell.
The following user(s) said Thank You: aledxde

Please Log in to join the conversation.

More
3 years 3 months ago - 3 years 3 months ago #228991 by Joffm
Replied by Joffm on topic Multiple dependent dropdowns in one row
Hi,
1. you were aware that the script you used is 10 years old and was created for a quite different version of LimeSurvey (started with 1.92)?
There is a newer similar one, but also only for the 2.59/2.73 branch.

Now, since LimeSurvey is based on bootstrap you may use this
[url] forums.limesurvey.org/forum/design-issue...s-same-height#216299 [/url]


2. There is a setting "display / height of dropdown". I would not recommend that because it always shows this number of options.
Better you use a "selectable dropdown"
 

3. You are right. But to design a good looking report <ou may use the plugin "pdfReport" optionally plus "limeMpdf"
[url] gitlab.com/SondagesPro/ExportAndStats/pdfReport [/url]

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 3 months ago by Joffm.
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

More
3 years 3 months ago #228995 by Joffm
Replied by Joffm on topic Multiple dependent dropdowns in one row
Best, you read the full thread
[url] forums.limesurvey.org/forum/design-issue...-columns-same-height [/url]

and additionally
[url] getbootstrap.com/docs/3.4/css/#grid [/url]
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

More
3 years 3 months ago #229014 by AlexBell
Replied by AlexBell on topic Multiple dependent dropdowns in one row
 

File Attachment:

File Name: limesurvey... (3).lss
File Size:79.49 KB

Dear Joffm,

A delight to see your quick response and kind help, as always!

Thank you for sharing the links and explanations - I have read through the threads and tried modifying my survey, but failed miserably. I am a complete newbie and it would take me a long time to learn the JS and CSS coding.

I was happy to see of how you had done it seeing the image you posted in your response - perhaps you wanted to include the .Iss file but forgot? :-) I would be most grateful if you could modify my attached survey directly please, if possible?

Thank you.
Alex
PS: I am planning to start learning JS over my weekends. If there is a beginners self-study book you could recommend, I would appreciate it.

Please Log in to join the conversation.

More
3 years 3 months ago #229026 by Joffm
Replied by Joffm on topic Multiple dependent dropdowns in one row
Please, take into account that you have 7 question to display, not only 3.
So in the javascript you have to enter
        // The number of questions to wrap in the flex container
        var numberQuestions = 7;

But of course, if you display such long items it will not work.
How do you expect it to work?

But - in my opinion - there shouldn't be any reason not to display the three drop-downs vertically, merged with "no-question", "no-bottom"
Like this
"no-bottom"


"no-question no-bottom"


Here the css that you may add to your "custom.css"
Code:
.no-question { border-top:0; }
.no-question .question-title-container { display:none; }
.no-question .question-valid-container { display:none; }
.no-bottom { border-bottom:0;margin-bottom:0; }
.no-question .answer-container {
    padding-top: 0em;
    padding-bottom: 0.5em;
}
.no-bottom .answer-container {
    padding-bottom: 0em;
}
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

More
3 years 3 months ago #229027 by Joffm
Replied by Joffm on topic Multiple dependent dropdowns in one row
Of course, the first is "no question no-bottom" and the second "no-bottom"
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

More
3 years 3 months ago #229033 by AlexBell
Replied by AlexBell on topic Multiple dependent dropdowns in one row
Dearest Joffm,

You made my day today! God bless!

With my gratitude,
Alex

Please Log in to join the conversation.

More
3 years 3 months ago #229169 by AlexBell
Replied by AlexBell on topic Multiple dependent dropdowns in one row
Dear Joffm, Dear Friends,

I am wondering if it is possible to display dependent dropdowns. Currently, only the first dropdown is shown and once I select an option in dropdown 1, then dropdown 2 appears next to it, and after selecting an option in dropdown 2, dropdown 3 appears next to it. Is it possible to have three dropdowns (or placeholders) to show - just for aesthetic reason. Please see the screenshot (modified in Paint) attached. Any guidance and help would be much appreciated.

Thank you. 
 

File Attachment:

File Name: limesurvey... (4).lss
File Size:77.74 KB

Please Log in to join the conversation.

More
3 years 3 months ago #229186 by Joffm
Replied by Joffm on topic Multiple dependent dropdowns in one row
Hi,
I have no idea what you want to achieve.
Your attached sample works fine,
if you add the class "flex-layout" to ALL involved questions.

To avoid the centered Q002 at the start you can add this to the css part of Q002
Code:
  .flex-layout.question-container {
    width:100%;
    }

 



Furthermore you may add some "placeholders" by adding two questions of type "text display"
with condition "is_empty(Q002)"
 



Joffm

But I still prefer a vertical layout with some merged arrays (drop-down layout)
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

More
3 years 3 months ago #229275 by AlexBell
Replied by AlexBell on topic Multiple dependent dropdowns in one row
Dear Joffm,

Many thanks for your kind support. I now have everything in place the way our teachers want, except for the layout - the questions do not seem to be one size. Would it be possible to have a fixed width layout for the entire survey?

Except for the first question, which my colleagues want to be parked on the top right hand corner with 50% length - Tony has kindly helped with this one.
I also followed your advice about placeholders to be Text Display, but the teachers wanted dropdown dummies instead, which I believe will affect the data collection, showing empty columns).

As always, I remain indebted to You, to Tony Partner and to all other friends and grateful for your priceless support.
Alex
Here is the link to my survey:  portal.iis.ac.uk/limesurvey/index.php/429383?lang=en

File Attachment:

File Name: limesurvey... (7).lss
File Size:118.13 KB

Please Log in to join the conversation.

More
3 years 3 months ago #229279 by Joffm
Replied by Joffm on topic Multiple dependent dropdowns in one row
Hi,
I did not write that you insert this here
 

Here you only enter the class name "flex-layout".
CSS styling you enter in in your "custom.css" or directly in the source code of the question.
And to explain more: This class name here restricts a styling to the elements with this class.
That not all question containers get this width, only question container in question with class "flex-layout"
Learn the basics about css.

In your case (all theses questions are on one page) it is sufficient to enter in the first question
And as there already is this css snippet
Code:
<style type="text/css">@media only screen and (min-width: 62px) {    
        .question-flex-container {
            display: flex;
            justify-content: space-evenly;
        }
    }
</style>

just add this line
Code:
<style type="text/css">@media only screen and (min-width: 62px) {    
        .question-flex-container {
            display: flex;
            justify-content: space-evenly;
        }
    }
   .flex-layout.question-container {     width:100%;     }
</style>


​​​​​​​
By the way:
A text display uses a column in the database as well.
You should have looked at the answer table after activating your survey.
This is always recommended and very helpful. Afterwards you deactivate again.


 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

More
3 years 3 months ago #229284 by tpartner
Replied by tpartner on topic Multiple dependent dropdowns in one row
I wonder at the min-width of 62px (approximately 1/5 the width of a phone in portrait aspect). In my opinion, that is an unnecessary media query.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

More
3 years 3 months ago #229285 by AlexBell
Replied by AlexBell on topic Multiple dependent dropdowns in one row
Dear Joffm,

Thank you for the guidance and the code: this has sorted my survey - and it looks great!

Much obliged.
Regards.
Alex
PS: Will definitely learn the basics about CSS and JS.

Please Log in to join the conversation.

More
3 years 3 months ago #229286 by AlexBell
Replied by AlexBell on topic Multiple dependent dropdowns in one row
Thank you, dear Tony. What should I put instead?

Please Log in to join the conversation.

More
3 years 3 months ago #229288 by Joffm
Replied by Joffm on topic Multiple dependent dropdowns in one row

What should I put instead?

Nothing, remove it.
As Tony, it is not necessary.

I did not mention it, because there was no harm.
... and I mostly overlooked it.
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: AlexBell

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source