How to remove white lines from images inside options in multiple choice questions? | XM Community

How to remove white lines from images inside options in multiple choice questions?

  • 24 April 2019
  • 5 replies
  • 154 views
fleb
Rank
Userlevel 5
Badge +6
  • fleb
  • Level 3 ●●●
  • 197 replies
Hi community,
I inserted images with transparent background to my choices in some multiple choice questions. When user clicks on the choice, the background of the image changes which would look very nice. Unfortunately, there "appear" one or two white lines at the border of the image which looks terrible. Therefore I don't want to have these lines there. Would anyone have some idea how to make them disappear (and still have colored background of selected choice)?
!

I'm quite sure that there are not such lines in images themselves. It happens with images from many different resources. I have zoomed some of these images as much as I could and there were no white lines. Moreover I've obstructed borders of one of these images with eraser in Photoshop and it didn't help. And I'm also not the only one with these lines as you can see here.
I use the "Minimal - blue" theme and don't want to change it since I have already done a lot styling within this theme.

5 replies

K
Rank
Userlevel 4
Badge +3
Hi, @fleb,

Without seeing the survey/page itself, my first guess is maybe there's another element in the survey template that ends up with a higher z-index than your image and is imposing that line? Can you Inspect element on the line vis a vis your image?

https://zapier.com/blog/inspect-element-tutorial/

You could try setting the z-index of your image to be higher than anything else on the page: https://www.w3schools.com/cssref/pr_pos_z-index.asp
fleb
Rank
Userlevel 5
Badge +6
Hi @KoalaTricks,
thank you very much for such a fast reaction. I'm not sure what do you mean by term "vis", but this is my label element.

Did you mean this or something else?
` <label for="QR~QID605~5" id="QID605-5-label" class="SingleAnswer " data-runtime-class-q-checked="runtime.Choices.5.Selected" style="padding-top: 21px; padding-bottom: 20px;"> <span>gray</span> <img src="https://cuhumanities.az1.qualtrics.com/WRQualtricsControlPanel/Graphic.php?IM=IM_b1osJCupEIUpQ9f&thumb=true&width=150" alt="Eye grey" data-image-state="ready"> </label>`

I don't know how to modify CSS of an image without any class or id, but I'l try to figure it out tomorrow. (Qualtrics unfortunatelly doesn't offer HTML view for choices).
K
Rank
Userlevel 4
Badge +3
@fleb,

I'm not sure how or where you're embedding the image. But if you're able to do it via HTML, I would try setting an arbitrarily large z-index to see if that helps. The z-index sets the stacking order of elements on the page.

<code><img src="yourimageurl" alt="Eye grey" data-image-state="ready" style="z-index: 999999999999999999 !important"></code>

Alternatively, if you can identify the DOM element responsible for the white line (try to right click + Inspect Element and move around until you are highlighting only the line), you could alter its z-index to be arbitrarily lower instead.
fleb
Rank
Userlevel 5
Badge +6
Hi @KoalaTricks,
thanks for such a quick answer again!
I've tried to set high z-index for all images in the CSS style-sheet like this:` img {z-index: 999999999999999999 !important;}` and nothing happened. I'm also not able to highlight the line using the inspector separately. I got just these two labels and it seemed that the line is in the image itself.
! !





Originally, I've inserted images like this and wasn't able to modify the HTML manually, since there was no image tag when I clicked on the choice to edit it and there was also no image in the rich content editor.
! -> !



## However, you answer gave me an idea to put the HTML img tag to the answer instead. Now there is no white line anymore.

! -> !

I realized, that the URLs used by these two ways are different. I think there might be problem with the image which is stored at the first URL which is different than URL which I have in my Graphics library:
`src="https://cuhumanities.az1.qualtrics.com/WRQualtricsControlPanel/Graphic.php?IM=IM_b1osJCupEIUpQ9f&thumb=true&width=150"`

`src="https://cuhumanities.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_b1osJCupEIUpQ9f" `

Thank you very much for your help!
K
Rank
Userlevel 4
Badge +3
@fleb -- Good sleuthing! Seems like a quirk of the thumbnail-ification. Glad it worked out.

Leave a Reply


Terms & Conditions