Matrix carousel not displayed correctly after adding display logic | XM Community
Solved

Matrix carousel not displayed correctly after adding display logic

  • 8 March 2024
  • 7 replies
  • 42 views
L
Badge +1

I set up a matrix carousel question after a rather lengthy bit of text. Because I would like to encourage respondents to first read the text, before reading the questions (on the same page), I would like to set up a “button” which triggers displaying the matrix carousel. I found a solution which works for me (involving a display logic dependent on a multiple choice question with only one option), however, this messes up the formatting of the matrix carousel (see preview screenshot). If I remove the display logic matrix carousel is displayed as expected. Is there a way I can circumvent this error or fix the formatting of the matrix carousel?  

Thanks in advance for helping! 

 

icon

Best answer by praveengeorgeix 8 March 2024, 16:29

View original

7 replies

praveengeorgeix
Rank
Userlevel 5
Badge +11

Would you link to share the link to inspect element.

L
Badge +1

@praveengeorgeix I set up a demo survey replicating the error. Here is the preview link: https://unikoelnmess.eu.qualtrics.com/jfe/preview/previewId/607b6980-b9f2-47d9-8b50-ff860d8580fd/SV_blKFZdZbXFZFyd0?Q_CHL=preview&Q_SurveyVersionID=current
Thanks for your help!

praveengeorgeix
Rank
Userlevel 5
Badge +11

@Luksh from what I can see is for some reason the width and height is getting disabled. 

I have added an important marker to keep it enabled.

 

.CarouselCardFrame {
    position: relative;
    width: 500px !important;
    margin: 20px 0;
    height: 244px !important;
    border: 1px solid #89919a;
    border-radius: 2px;
}

 

Please try adding this in the below Custom CSS

 

L
Badge +1

Thanks @praveengeorgeix! This worked for desktop, but now on mobile view the statement exceeds the border to the right. I tried modifying the Custom CSS also by looking into the replies from related forum posts, but can’t seem to figure it out. 

praveengeorgeix
Rank
Userlevel 5
Badge +11

Try the below code replacing the initial one.

 

.CarouselCardFrame { position: relative; width: 500px !important; margin: 20px 0; height: 244px !important; border: 1px solid #89919a; border-radius: 2px; }

@media only screen and (max-width: 600px) {
.CarouselCardFrame { position: relative; width: 100px !important; margin: 20px 0; height: 50px !important; border: 1px solid #89919a; border-radius: 2px; }
}

 

L
Badge +1

This worked! Now all I need to do is fiddle with the parameters until I like it. Thanks so much for your help today, @praveengeorgeix!

 

praveengeorgeix
Rank
Userlevel 5
Badge +11

No worries @Luksh

Take care

Praveen

Leave a Reply


Terms & Conditions