Hey guys!
I would like to ask for help with a problem I have been having.
I have a carousel on my screen and I used CSS to adjust the carousel's navigation arrows a little lower.
However, only the arrows moved, but the circle at the bottom of them remained in the same place as before.
Would there be any way to move this bottom circle down so that it is behind the arrows?
I leave here the link for anonymous access to the page I am creating, so anyone who wants to inspect the code can.
LINK: https://personal-sazpoglu.outsystemscloud.com/ImobiADM/Home3?_ts=638548453386636301
Thank you very much to everyone who can help!
Thanks!
Hi @Luiz Lima ,
there is no need to use important at all, and it is a bad practice to use it unless absolutely necessary.
All you need to do is check with Chrome dev tools what css rule is setting the position in OutSystems UI, and match that with the same selector in your module or screen to override it.
this will do it for you
Dorine
Thank you very much, I managed to adjust as you said.
hey, @Luiz Lima
You have to use this CSS on your block or screen CSS
.osui-carousel .splide__arrow {
padding-top: 0px !important;
}
or
padding-top: 0px !important ;
position: absolute !important ;
top: 149px !important ;
When !important is added to a CSS property value, that value is given the highest priority.
This means that even if another rule is more specific, the !important rule will take precedence.
you have to use it !important for overnight OutSystem CSS
this helped you,
thanks
Image Caption
Thank you my friend, your solution also worked.