Modify carousel container or option prompt buttons | XM Community
Solved

Modify carousel container or option prompt buttons

  • 23 February 2021
  • 7 replies
  • 452 views

Badge +1

Does anyone have any suggestions on how to modify the container or the option prompts when using the matrix table carousel option? I want to use a 6 option prompt (horizontal position) but it cuts off and enables a scroll bar.

icon

Best answer by Diana_A 25 February 2021, 20:06

View original

7 replies

Badge

I tried to use your code @Diana_A, no matter where I put it, it comes up with: 

Invalid JavaScript! You cannot save until you fix all errors: Unexpected token .

Is there an alternative to the code you put, or a way to fix it?

Badge +3

https://community.qualtrics.com/XMcommunity/discussion/comment/38480#Comment_38480You can try the below...

https://community.qualtrics.com/XMcommunity/discussion/comment/38481#Comment_38481Could you explain precisely where did you go (in the code) to manage this?
I would like the size of the box fit with the size of the statement inside. Would be great.
Many thanks.
Olivier.

Badge +1

And thanks Diana_A for yours too, I was able to adjust the container space to remove all the white space.

Badge +1

Thanks SWhitfield! I managed to modify the container with what you suggested, but I think it impacted how mobile view worked as it left aligned all the prompts rather that display the mobile friendly option. I'll continue to play around the code.

Badge

Try the following:
.CarouselAnswerButtonContainer {
   min-width: 10px;
   width: 60px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin: 2px;
}
.CarouselAnswerButton.Horizontal.Overflow {
   min-width: 16px;
 

Badge

I have the same issue with the scroll bar at the bottom. I have 6 scale points and can't figure out how to make it fit.

What changes do you need to make to the container? I managed to change the size of the answer option box using this code in the custom css box. You can play with the dimensions
.CarouselCardFrame{position:relative;width:500px;margin:20px 0;height:100px;border:2px solid #104ba5;border-radius:2px}

Leave a Reply