Modify carousel container or option prompt buttons | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Modify carousel container or option prompt buttons

  • Feb 23, 2021 10:55 AM UTC
  • 7 replies
  • 1002 views
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}

View original

7 replies

Forum|alt.badge.img
  • Diana_A
  • Answer
  • Feb 25, 2021 7:06 PM UTC

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}

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;
 

Forum|alt.badge.img+1
  • EMack
  • Author
  • Jun 18, 2021 8:49 PM UTC

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.

Forum|alt.badge.img+1
  • EMack
  • Author
  • Jun 18, 2021 8:50 PM UTC

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

  • Oli
  • Nov 23, 2021 5:04 PM UTC

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.

Forum|alt.badge.img+3
  • Ash1
  • Feb 10, 2022 2:51 AM UTC

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

Forum|alt.badge.img
  • Willow28
  • Feb 22, 2024 2:32 PM UTC

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