Modify carousel container or option prompt buttons | XM Community
Skip to main content
Solved

Modify carousel container or option prompt buttons

  • February 23, 2021
  • 7 replies
  • 864 views
E
Forum|alt.badge.img+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.

Best answer by Diana_A

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}

7 replies

D
Forum|alt.badge.img
  • Diana_A
  • Answer
  • February 25, 2021

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}

S
Forum|alt.badge.img

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;
 

E
Forum|alt.badge.img+1
  • EMack
  • Author
  • June 18, 2021

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.

E
Forum|alt.badge.img+1
  • EMack
  • Author
  • June 18, 2021

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

O
  • Oli
  • November 23, 2021

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.

A
Forum|alt.badge.img+3
  • Ash1
  • February 10, 2022

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

W
Forum|alt.badge.img
  • Willow28
  • February 22, 2024

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?

Terms & ConditionsAccessibility statement