Delete the space created by a hidden question | XM Community
Skip to main content
Solved

Delete the space created by a hidden question

  • January 19, 2022
  • 7 replies
  • 173 views
JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • JR33
  • QPN Level 2 ●●

I use the "display:none" style a lot to ask my questions in a text block in order to apply display logic. Unfortunately, this creates a very unsightly white space between my text block (question) and the items of my question block.
What can I do for :
- remove the white space following my text block (question)
- or prevent the "display:none" of my question block from creating a space
Capture.PNG
Thanks for your help

Best answer by Rudi

Hi,

the most obvious thing would be to have the text in the question text. But as this is so obvious there must be a reason why you are not doing this.

you could try this:

Qualtrics.SurveyEngine.addOnReady(function()
{
 let questionOuter = document.getElementsByClassName("QuestionOuter")
 let questionText = document.getElementsByClassName("QuestionText")
 console.log(questionOuter)
questionOuter[0].style.padding="0 0 0 0"
questionText[1].style.display="none"
});
 Looks something like below then:
Unbenannt.JPG




7 replies

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • January 19, 2022

Hi there,
would you please describe your issue in a little bit more detail? If I understand this correctly you have the question text in a text/ graphic node, then you leave the question text empty (respectively hide the question text with "display: none" and use only the answers from the multi-select question?
Is my understanding correct?
Best regards
Rudi

JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • JR33
  • Author
  • QPN Level 2 ●●
  • January 19, 2022

Thank you Rudi, you understood my issue perfectly.
What can be considered to "bring together" the two blocks (text/graphic node and multi-select question) ?

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • Answer
  • January 19, 2022

Hi,

the most obvious thing would be to have the text in the question text. But as this is so obvious there must be a reason why you are not doing this.

you could try this:

Qualtrics.SurveyEngine.addOnReady(function()
{
 let questionOuter = document.getElementsByClassName("QuestionOuter")
 let questionText = document.getElementsByClassName("QuestionText")
 console.log(questionOuter)
questionOuter[0].style.padding="0 0 0 0"
questionText[1].style.display="none"
});
 Looks something like below then:
Unbenannt.JPG




JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • JR33
  • Author
  • QPN Level 2 ●●
  • January 19, 2022

It works perfectly, thank you !
If I don't write the text of the question in the question itself, it's because I use different ways of addressing the customer depending on where they come from. I'm using display logic for this but I won't reproduce my question multiple times. Only text and if I'm not mistaken qualtrics doesn't allow it yet ?

JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • JR33
  • Author
  • QPN Level 2 ●●
  • January 19, 2022

I was wrong, your code actually hides the text field previous to the question.

Rudi
QPN Level 3 ●●●
Forum|alt.badge.img+16
  • Rudi
  • QPN Level 3 ●●●
  • January 19, 2022

where did you put it? and how many questions do you have? :-)
you might need to change the values in []

best regards

Rudi

JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • JR33
  • Author
  • QPN Level 2 ●●
  • January 19, 2022

I have 2 formulations of questions. I inserted your code in JS.
But your proposal put me on the track of a solution. I used in my text questions :
jQuery("#"+this.questionId).find('.QuestionText:first').css("padding-bottom", "0px");
and in my question with smiley :
jQuery("#"+this.questionId).find('.QuestionText:first').css("margin-bottom", "-3em");
and the result seems to work:
Capture.PNG

Terms & ConditionsAccessibility statement