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
 

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

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]
 

 
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, 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"  

Of course, the first is "no question no-bottom" and the second "no-bottom"

Dearest Joffm,

You made my day today! God bless!

With my gratitude,
Alex

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. 
 

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
 



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)

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

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
just add this line

​​​​​​​
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.


 

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.