Modify carousel container or option prompt buttons | XM Community
Solved

Modify carousel container or option prompt buttons

  • 23 February 2021
  • 7 replies
  • 430 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 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}

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 +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 +1

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

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 +3

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

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?

Leave a Reply