Conflicting CSS in custom header | XM Community
Skip to main content
Solved

Conflicting CSS in custom header

  • September 4, 2021
  • 2 replies
  • 46 views
T

Dear Fellow Qualtrics Researchers,

I am having trouble with conflicting CSS' in my custom header. I had professional coders code up two separate interfaces, both of which needs CSS about #chartviewcontainer in the custom header like the one below:



Due to the two conflicting CSS about the same #chartviewcontainer, I can only keep one of them in the header. However, the other interface won't show up properly if I take its #chartviewcontainer CSS properties away.

I do need to keep the two interfaces in the same survey. :( Please let me know what I can do to fix this. Many thanks!!!!

Best,
Tingyan

Best answer by NiC

The chartviecontainer is present in a question ?
if so you can have them in two different questions and then you can just prepend questtion ID selector , to make this CSS question Id specific
#QID1 #chartviewcontainer

{ width: 100% !important }.thumbchart { 

 width:120px !important; height:120px !important; padding:10px 10px 10px 10px;

 }.nohover { pointer-events:none;}.hoverglow{ background: #fafafa; /* width:120px; float: left;*/

  display: inline-block; margin: 10px;}.hoverglow:hover{ background: #f5f5f5;}.selected {background: #f0f0f0;}

2 replies

NiC
QPN Level 5 ●●●●●
Forum|alt.badge.img+27
  • NiC
  • QPN Level 5 ●●●●●
  • Answer
  • September 6, 2021

The chartviecontainer is present in a question ?
if so you can have them in two different questions and then you can just prepend questtion ID selector , to make this CSS question Id specific
#QID1 #chartviewcontainer

{ width: 100% !important }.thumbchart { 

 width:120px !important; height:120px !important; padding:10px 10px 10px 10px;

 }.nohover { pointer-events:none;}.hoverglow{ background: #fafafa; /* width:120px; float: left;*/

  display: inline-block; margin: 10px;}.hoverglow:hover{ background: #f5f5f5;}.selected {background: #f0f0f0;}

XM Engineer | Zill Consulting
T
T
  • tingyanjia
  • Author
  • September 6, 2021

https://community.qualtrics.com/XMcommunity/discussion/comment/40288#Comment_40288Hi Nic,

Thank you so much for the helpful response! I didn't know we can tag individual questions this way before.

Now I've done that to the CSS code, I realize that the JS scripts codes for the two interfaces in the header are conflicting with each other as well. Is there a way to fix conflicting JS scripts in the custom header too? I tried something like the following but it didn't work:

">https://scriptstrading.s3.us-east-2.amazonaws.com/Chart.min.js">#QID493

The first interface will only show properly once I completely take out the scripts related to the second interface out of the custom header.

Any thoughts or ideas are sincerely appreciated. Many thanks in advance,
Tingyan


Terms & ConditionsAccessibility statement