Log in to AnswerLog in to Follow
2018-11-09 09-14-06
Gonçalo Almeida
26Views
4Comments
Solved
[OutSystems UI Web] Carousel grid type
Question
Forge
OutSystems UI Patterns
Traditional Web
outsystems-ui-web
Web icon
OutSystems UI Web
Forge component by Platform Maintenance
Application Type
Traditional Web
Service Studio Version
11.14.14 (Build 59923)
Platform Version
11.14.0 (Build 34092)

Hey there,

I'm using a Carousel in a Costumer's portal. That portal's base theme doesn't have a grid type ("none"), but the Carousel seems to only function properly if I set the theme's grid type to "fluid".

The problem is if I set the theme's grid to "fluid", the rest of the portal will show out of alignment in several points (and other css errors stuff). I can't refactor the entire portal for this.

Is there any way I can overcome this without refactoring the entire portal?


Thanks in advance

0
0
19 Apr
2022-01-13 11-39-41
Bernardo Cardoso
Staff
Solution

Hi @Gonçalo Almeida, thanks for the oml!


I think you can use this bit of CSS to fix this:


.carousel-container .ListRecords {

    display: block

}


Let me know if it helped!

Bernardo

See solution in context
0
0
20 Apr

Hey Berbardo,

It worked.
Thanks ;)

0
0
21 Apr

Hi @Goncalo Almeida,

Can you share a simple oml with that issue? I did a quick test on my side and it seems to be working well, maybe I'm missing something.


Best regards,

Bernardo Cardoso

0
0
20 Apr

Hey Bernardo,

I've attached an oml.

Steps:
1- Go to webscreen3.aspx and upload the google.png image that's inside the oml;
2- In the same screen upload the same image again so you have 2 images to scroll in the carousel;
3- Go to webscreen1.aspx and see the google image being distorted;
4- Edit the oml and change the grid type to "Fluid" in Theme1 and publish;
5- Refresh webscreen1.aspx and see that the carousel is working properly with the 2 google images;

TestCarousel.oml

0
0
20 Apr
2022-01-13 11-39-41
Bernardo Cardoso
Staff
Solution

Hi @Gonçalo Almeida, thanks for the oml!


I think you can use this bit of CSS to fix this:


.carousel-container .ListRecords {

    display: block

}


Let me know if it helped!

Bernardo

0
0
20 Apr

Hey Berbardo,

It worked.
Thanks ;)

0
0
21 Apr
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.