Check out the LimeSurvey source code on GitHub!

align textbox with question

More
6 years 4 months ago #50930 by stanner
I thought I had seen in the forums once a way to align the short free text box with the text of the questions, but I can't seem to find that solution, maybe I am crazy and it was never there. :unsure:

What I would like to do is align the text box with the question
eg:

Question 1 [Short Free Text]

instead of

Question 1
[Short Free Text]

and it would be really awesome if I could do the following

Question 1 [Short Free Text] Question 2 [Short Free Text]
Question 3 [Short Free Text] Question 4 [Short Free Text]

Etc . . . .


Thank you!

Please Log in to join the conversation.

More
6 years 4 months ago #50931 by Mazi
This can be done but requires quite some question specific CSS hacks.

If you just need this layout:
Question 1 [Short Free Text]

you can use a multiple short text question, add only one subquestion and add the question text at the subquestion.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
6 years 4 months ago #50988 by stanner
Mazi,
I tried that but I run into two problems.
1. when the question is set to mandatory all fields become mandatory
2. in order to validate a specific set of questions,JavaScript must be used which means enabling XSS.

Since this section of the survey is basically a web form to fill in basic who are you information my preference would be to do something like:

Question 1 [Short Free Text] Question 2 [Short Free Text]

Are there any examples out there of what these question specific css hacks would look like?

Please Log in to join the conversation.

More
6 years 4 months ago #50989 by Mazi
There is an examples at workarounds (->JavaScript if I remember correctly).


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
6 years 4 months ago #50992 by holch
I think you did not understand the Mazis solution.

He suggests to use the question type "multiple short question text" but only with one subquestion per question. So you still would have various independent questions.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
6 years 4 months ago #50993 by stanner
@ Mazi, is there any way to do it without using javascript? If I remember correctly using javascript with Limesurvey means that you have to enable XSS, which I can not do.

@holch, Yes you are correct I did misunderstand, however, validation is not available with "multiple short text questions" unless you use javascript. Unless javascript can be implemented without the use of XSS, I can not implement.

Thank you both for your quick replies.

Please Log in to join the conversation.

More
6 years 4 months ago #50998 by Mazi
When using the workaround you have to use Javascript.

When using the multiple short text alternative you don't need any JS.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
6 years 4 months ago #51003 by stanner
I have created a few multiple short text questions with only one question each in them, but for the life of me I can't figure out how to get the validation to work.

Please Log in to join the conversation.

More
6 years 4 months ago #51004 by holch
I had a look at that as well and the only validation that I see is the possiblity to limit the number of characters.

Hmm, then the only option will be to play around with floats to align the question text and the input type. Not sure if this can be done with CSS only. There is a workaround that shows how to align different questions, but it also requires Javascript.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
6 years 4 months ago #51005 by Mazi
Validation isn't possible at a multiple short text question.

I'm not sure if it's possible, but what if you use a simple short text question and add the question text at the "prefix" question attributes (if this exists for this question type)?!


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
6 years 4 months ago #51008 by holch
Hey Mazi!

Good out of the box thinking! There is a prefix question attribute for the short text question type.

How he only needs to aline two questions via float.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in to join the conversation.

More
6 years 4 months ago - 6 years 4 months ago #51016 by stanner
Mazi and Holch,
Thanks again for your help on this, I have the questions aligning properly.
Here is the per question css to get this working properly
#question1 {
width:50%;
float:left;
}
 
#question2 {
width:50%
}
 
#question3 {
width:50%;
float:left;
}
 
 
#question4 {
width:50%
}
I have just a few other UI issues on this can I can't quite figure out.
I have attached a picture that shows what we are looking at.



Here are the things that I would like to change
1. the asterisk indicating the question is mandatory is up above the question and is on a grey backgroun.
I know that I can set the background-color to transparent, but how would I do the following: remove question div so that the asterisk is right next to the previx, remove help div so there is not extra spacing at the bottom, remove the border around the question.

Thanks again!
Attachments:
Last Edit: 6 years 4 months ago by stanner. Reason: picture did not attach properly

Please Log in to join the conversation.

More
6 years 4 months ago #51042 by Mazi
Thanks for posting your solution.

Can you please add your solution to the workaround section of our manual so other users can beneffit from your solution, too!?

Thanks!


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
6 years 4 months ago #51049 by DenisChenu
stanner wrote:

1. the asterisk indicating the question is mandatory is up above the question and is on a grey backgroun.
I know that I can set the background-color to transparent, but how would I do the following: remove question div so that the asterisk is right next to the previx, remove help div so there is not extra spacing at the bottom, remove the border around the question.

Thanks again!

For the asterisk, maybe someting like that:

Look where is your question (.questiontext for the example)

#question1 .questiontext{width:2em;float:left;background:#FFF}

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form