How do I reduce the border width for one page in the survey? | Experience Community
Skip to main content

How do I reduce the border width for one page in the survey?

  • Feb 14, 2023 2:56 PM UTC
  • 7 replies
  • 207 views

Forum|alt.badge.img+4

I am trying to create an information page (text questions only) like this:
{question text 1 - always show}
{question text 2 - hidden for certain respondents}
{question text 3 - always show}
without any spacing between the "questions". I have tried code from the community (TomG) that reduces the separator spacing... inspecting the preview shows the separator is a line. There are, however, borders around each element and I think reducing the border width (preferably top and bottom only)
qualtrics.pngI have managed to color the border to show where it is by adding:

to the html code of the first "question".
I would also like to reduce the spacing of the border (border-width?) so that there is no space between lines.
My preference would be to use javascript or edit the style as above (not apply a custom css to the whole survey.
Can anyone point me in the right direction?

7 replies

grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+18
  • QPN Level 3 ●●●
  • Feb 16, 2023 4:24 PM UTC

Did you have a logic for those display questions?


Forum|alt.badge.img+4
  • Author
  • Level 1 ●
  • Feb 16, 2023 5:17 PM UTC

Thanks grahulp5 for having a look at my question. Yes, there would be display logic applied to the middle "question" to hide for some respondents. The first and last would be displayed for all respondents. Essentially I'm looking to make an information page (text only) with some parts hidden, but splitting the text in that way means there is added space between the "questions".


qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • Feb 16, 2023 6:44 PM UTC

Hi Crystal250 ,
I think below code can serve your purpose.

You can change padding and line-height as per requirement.
With Above code I get this:
image.pngHope it resolves your problem😊!!!


Forum|alt.badge.img+4
  • Author
  • Level 1 ●
  • Feb 17, 2023 2:11 PM UTC

Thanks qualtrics_nerd :) I am feeling a bit dense... where do I put the code? It looks like html... I tried switching the text of question 1 to HTML view and adding your code at the beginning (see image).
qualtrics.pngWhen I inspect the result it shows me the spacing is in div.QuestionBody (see image 2).
qualtrics 2.png


qualtrics_nerd
Level 5 ●●●●●
Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • Feb 17, 2023 4:08 PM UTC

Hi Crystal250 ,
Follow the steps below:
1.Click on Rich Content editor
image.png2.Click on below highlighted symbol:
image.png3.Add your code below:
image.pngFurther, if it is possible can you please share a preview link using dummy survey having similar structure so that I can provide custom code to suit your survey .


Forum|alt.badge.img+4
  • Author
  • Level 1 ●
  • Feb 17, 2023 5:27 PM UTC

Hi qualtrics_nerd,
Your request that I share a link was very helpful. I created a brand new survey (the one I was working in was copied from one from last year). That one works fine:
Preview - Qualtrics Survey | Qualtrics Experience ManagementI then created one copied from the one that's not "working":
https://bcmcf.yul1.qualtrics.com/jfe/preview/previewId/68211e20-fa08-4e0f-9c04-d75514ddd260/SV_cCLnbM7lnUSfIGO?Q_CHL=preview&Q_SurveyVersionID=current
I guess this means there's some style applied that is "interfering" with what I'm trying to do?
I will continue to look into it as well - thank you for all of your help so far!


Forum|alt.badge.img+4
  • Author
  • Level 1 ●
  • Feb 17, 2023 5:38 PM UTC

Switching from flat to classic layout "fixes" it...