Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Two questions side-by-side

More
4 weeks 1 day ago #271206 by rwinford77
Two questions side-by-side was created by rwinford77
Please help us help you and fill where relevant:
LimeSurvey version: 6.15.5   Build 250724
Own server or LimeSurvey Cloud:  Own server, linux Virtual Private Server
Survey theme/template:   vanilla
==================
I am in the process of upgrading from v3 to v6 and running into several minor issues.  One problem is trying to get two questions to show on the same row, side-by-side.  This worked find in v3 with a simple step:  in the question/display section I added "col-sm-6" to the custom CSS field in both questions.  I tried the same thing on v6 and I can't get it to work at all.  

Question 1 is a 2-option Radio (list) question and is mandatory.  Question 2 is a short free text question that is supposed to show only when option 2 is selected on Q1.  Q1 is "Who is attending?" with two options:  "myself"  and  "myself and spouse".   Q2 shows up when the user selects "myself and spouse" and is a prompt for "Spouse Name.".  

I have tried multiple things:
1.  I added "col-sm-6" to both questions custom css.
2.  I added "col-md-6" to both questions custom css, based on reading the new Bootstrap v5 doc
3.  I asked ChatGPT and it gave me several things to try, including added some complex Javascript and trying to wrap both questions into one div in the css. 
(I'm not sure if I did that correctly or not..

Nothing is working.  I have tried to examine the resulting html and css using Chrome DevTools and I can't see anything that would be an easy fix. 

I created two small, simple surveys with just the two questions.  (instead of the entire survey LSS).  One is from LS3 and one is from LS6.  

any suggestions would be most appreciated.  

Please Log in to join the conversation.

More
4 weeks 1 day ago - 4 weeks 1 day ago #271207 by Joffm
Replied by Joffm on topic Two questions side-by-side
You may use the "flex-layout" solution of @tpartner.
[url] forums.limesurvey.org/forum/design-issue...s-same-height#216299 [/url]

As you have only two questions:
Code:
<script type="text/javascript" data-author="Tony Partner">  
  $(document).ready(function() {
 
    // The number of questions to wrap in the flex container
    var numberQuestions = 2;
 
    // Identify the questions
    var thisQuestion = $('#question{QID}');    
    var rowQuestions = thisQuestion.add(thisQuestion.nextAll('.question-container:lt('+(numberQuestions-1)+')'));
 
    // Wrap the questions in a <div> element
    rowQuestions.wrapAll('<div class="question-flex-container" />');
  });
</script>


Code:
<style type="text/css">
  @media only screen and (min-width: 576px) {  
    .question-flex-container {
      display: flex;
      justify-content: space-evenly;
    }
  }
</style>

 
 
 

Joffm

And I am curious:
What did ChatGPT hallucinate about LimeSurvey?
If ChatGPT talks about LimeSurvey it's usually only a source of amusement; it has nearly no knowledge of LimeSurvey.
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 weeks 1 day ago by Joffm.
The following user(s) said Thank You: rwinford77

Please Log in to join the conversation.

More
4 weeks 1 day ago #271215 by rwinford77
Replied by rwinford77 on topic Two questions side-by-side
Thank you, @Joffm.

I read through your suggestion, didn't quite understand it, but with your info and your pointer to the other thread, and I found another thread by Tony. I didn't want to use any javascript because some of the survey creators and maintainers have no skills, and I don't want to maintain it.

But, based on what you gave me i was able to create something similar:

I created two classes in custom.css called "col1-question" and "col2-question" using the flex attributes and an @media size constraint. That worked great, except the next question in my actual survey ended up on the far right column, too. So, I had to add a class "col-md-12" to the next question, which fixed it.

I put this into my theme's custom.css file:  Then, I added "col1-question" to the first question's custom css field and "col2-question" to the second question's custom css field and "col-md-12" to the next question after the two side-by-side questions.  This works great, and I can tell my other survey creators to use this model.  It flexes fine between laptop screen and mobile screen.
Code:
@media only screen and (min-width: 750px) {
.col1-question {
  float: left;
  width: 32%;
  margin-right: 2%;
  clear: left;
}
.col2-question {
  float: left;
  width: 65%;
}
}
 

Thank you,
Rick

Please Log in to join the conversation.

More
4 weeks 1 day ago #271216 by rwinford77
Replied by rwinford77 on topic Two questions side-by-side
Here's what ChatGPT said: chatgpt.com/share/688ca3eb-d534-8002-8b6c-39cc3847c474

Please Log in to join the conversation.

More
4 weeks 1 day ago #271217 by rwinford77
Replied by rwinford77 on topic Two questions side-by-side
quick question: do you know why using "col-sm-6" no longer works in LS6? I tried to figure it out, but my html/css skills are not good enough.

Please Log in to join the conversation.

More
4 weeks 21 hours ago #271224 by Joffm
Replied by Joffm on topic Two questions side-by-side
Hi,
In the linked thread you saw that the main focus was on the same height of questions

However, in my case different question types have different heights, which doesn't look good.

Therefore this solution.
Of course, your solution works and with a theme like "fruity-twentythree" the height difference is more or less hidden
 
but you see it in e.g. "fruity"
 


To be honest: In this case I'd prefer the standard (two questions below each other)
With the two classes "no-bottom" in the first question and "no-question" in the second
 
 
Code:
<style>
.no-question .question-title-container,
.no-question .question-valid-container { 
    display:none; 
}
.no-question .answer-container {
    padding-top: 0em;
    padding-bottom: 0.5em;
}    
.no-question .question-container {
    border: none !important;
}
.no-bottom {
    border-bottom:1px solid #e6e6e6;
    margin-bottom:0; 
}
.no-bottom .answer-container {
    padding-bottom: 0em;
}
</style>

But, it's your decision.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

Moderators: holch, tpartner

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source