Hello,

I really like Ubuntu Orange template and I have made a few small adjustments to it already.

Can I make a survey layout like this?



Rationale is to have one very simple screen for this survey. It will always be on a computer monitor (19 inch). The survey will be used for patient feedback and after completing it will reload the same survey screen. I want it to be really compact and simple so that people do not have to scroll. They would just move the two vertical sliders and if they wanted to - they also could enter their comments in the text boxes. I could make the sliders vertical. Is it possible to create a 2 x 2 matrix layout for those questions? Maybe I could use a <table>?

Many thanks for your suggestions.

Robert

In the advanced question settings, you can define a CSS class for the questions. Let's say "my-slider-question" for the sliders and "my-text-question" for the long-texts.

Then in template.css, you can apply styles to the questions something like this. It should place them side-by-side.

Thank you ever so much. This works brilliantly; I never knew why this class feature was necessary in the advanced settings, now I do.

where should i declare this classes so compiler will understand which part of question Css apply..

Didn't you see the bold italic word in Tony's answer.

BTW: Don't post your questions in different topics.
It's answered in your original post.
Joffm

ok. thank you..
Sorry..

Here is my summary of how I did it, in case someone else needs this guidance:

You edit the question advanced properties - there you can set the class. Class in CSS basically functions as a label. What it does when the page html is rendered - it tells the browser that this question needs to be styled with what is defined under this label. The other bit that you must do is to edit the main stylesheet. I found it easiest is to add your new style definition to the stylesheet end using the limesurvey built-in template editor. There you can define that class with the same label as Tony has demonstrated. The name of your label does not matter - it should be descriptive enough for you to remember "it is your edit and it does this". So I changed Tony's class string ("label") to something like .RobClass. Of course the labels must be the same in the question properties and the stylesheet definition (as shown by Tony).

As you can see there are 2 styles defined and one question occupies about 35% width and the other about 65% width, therefore they are displayed side by side, because there is enough space in the width of the page (100%). Of course, the questions must follow one after the other for this to work.

HTH

P.S. do not forget that to be able to edit the stylesheet you need to copy that template first. I just copied ubuntu_orange calling it RobUbuntuOrange and assigned it to my survey.

About css class using : you can use boostrap class :

For exemple , for a 50/50 : col-sm-6 in each question,
The good think with this way : show at 50/50 in desktop, but at 100/100 in mobile (webphone).

See getbootstrap.com/css/#grid

In most cases, I prefer to set my own breakpoints instead of bowing to the almighty Bootstrap's opinion on appropriate widths.