Carousel in Tab widget is not working properly in Reactive Web Application
Question
Application Type
Reactive

In reactive web application, when carousel is used inside the tab widget, the carousel is not working properly,

I have 8 Items inside the carousel, and have set that 3 items should be displayed in desktop 2 in tablet and 1 in mobile phone, 

But what is happening is only one items is shown in the desktop view, also when navigating it is not behaving properly it is showing the next card partially only. also only 2 and a half items are shown in the entire list whereas there are 8 items.

Has anyone faced this kind of issue?

 i found that the outsystems carousel script is getting the offset width from  

"carouselEl = carousel.querySelector('.carousel-container-content');" but when carousel is used inside tab widget its returned as 0.


Found that when viewing in mobile it is working properly. i.e one items is shown and all the items are viewable, but its not working in desktop.  When i go to inspect mode and select device its working as expected. the dynamic width calculation is happening as expected, but other wise its not working properly.


Any help would be appreciated.

Thank You.

 

Solution
CarouselWebAppUpdated.oml

Hello Milton

Can you please share the Page URL with allowing anonymous access for testing? After look into the page, we might able to understand the exact defect and help you.

Hi thanks for responding.

https://santhosh-princeton.outsystemscloud.com/CarouselWebApp/CarouselScreen?_ts=637501255338583014


This is the url link. At the top is a normal carousel with images. 

At the bottom ive put the carousels inside the first tab.

 You can see that the carrousel in tab the image doesn't appear at all because the width that should be automatically calculated is not appearing. 

Hello Milton

Thanks for sharing the URL. When I access the URL, I can see images correctly for both - In Tab and without Tab.

Please check the attached screenshot.

Please feel free to share your screenshot if anything missing there.

Screenshot20210228165216Chrome.jpg

Hi, i have added a screenshot to show how its appearing to me.

I have set equal number of items in both the carousels, i have kept 8 items in both.  only after i applied the margin as 10 in the carousel i am able to view the image itself.

In desktop view i want 3 items tablet-2 and mobile-1

i am unable to view all the 8 items in the carousel that is in the tab widget




Dear Milton 

Thanks for more clarification and sharing the OML file. I have done some changes in your file and here is the result - https://personal-9qwkrkgl.outsystemscloud.com/CarouselWebApp/CarouselScreen?_ts=637501896347184176


Please have a look and confirm if you are requiring the same. So, I will send the final OML to you. 

Please do remember if you are checking this on browser do refresh on resolution change as on mobile device the users will always get perfect result because URL will be hit in respective resolution. 




Thanks

Hi, this looks good. In the last tab alone its appearing like this. Can you provide me the oml and explain what was done to achieve ? Are you using media queries??Thank you.


Dear Milton 

Thanks for your confirmation. 

It has been achieved with small piece of CSS for different resolution (Pasted below)

@media only screen and (max-width: 600px) 
{
    .carousel .carousel-container > .carousel-container-content > *:not(.list), .carousel .carousel-container > .carousel-container-content > .list > div 
    {
        display: inline-block;
        width: 100%;
        white-space: normal;
    }    
}

@media only screen and (min-width: 600px)
{
    .carousel .carousel-container > .carousel-container-content > *:not(.list), .carousel .carousel-container > .carousel-container-content > .list > div
    {
        display: inline-block;
        width: 100%;
        white-space: normal;
    }
}

@media only screen and (min-width: 768px) 
{
    .carousel .carousel-container > .carousel-container-content > *:not(.list), .carousel .carousel-container > .carousel-container-content > .list > div  
    {
        display: inline-block;
        width: 50%;
        white-space: normal;
    }
}

@media only screen and (min-width: 992px) 
{
    .carousel .carousel-container > .carousel-container-content > *:not(.list), .carousel .carousel-container > .carousel-container-content > .list > div 
    {
        display: inline-block;
        width: 33%;
        white-space: normal;
    }
}


You can use this CSS in Screen Style Sheet


OML is attached for reference.

CarouselWebApp.oml

Its working but its not perfect, the last item alone gets truncated, otherwise its ok. Will apply this fix for now.

Hii Milton 

For the last slide image, I will give you the solution by today. I am occupied in something very urgent for now. In evening, I will share some solution with you for that as well.

Solution
CarouselWebAppUpdated.oml

Dear Milton

Did you find it correct? Please feel free to ask if you have any question.

Hi Manish,

Your solution is working as expected. Thank you. Using this as a workaround for now. Hope outsystems fixes this issue.

Thank you for providing a solution.

Hi Santhosh princeton Job milton,

Could you share you OML file?

Best Regards


Hi i have attached the oml file here. 

CarouselWebApp.oml

Komal Kumbhar

Hi Santhosh,

Please refer attached OML for your query, I have changed the size of both image and container to look it as with out TAB.


Regards,

Komal

CarouselDemo.oml

Thanks for sharing the URL. When I access the URL, I can see images correctly for both - In Tab and without Tab.


Hi all,

I am not a Javascript or OutSystemsUI subject matter expert but based on my observations I found out the following information and solution.

The reason why you have an extra image fragment is because the Carousel's "carousel-container" width cannot be calculated correctly and so the spacing is wrong when laying out the Carousel items. You can see that the alignment of the images within the Tab is different than outside of it. This is because when the Carousel is initialized the Tab container has not finished rendering. By inspecting the JavaScript from OutSystemsUI, you can see that the "carouselEl.offsetWidth" variable evaluates to 0 (using Tabs) instead of 1200 (in my non-Tabs case). That JavaScript calculation applies a fixed pixel width to the items. However, it's not being applied and it does not reapply when the screen is resized.

The solutions above set the width based on the media breakpoints or using Bootstrap's col-* definitions. The problem is that when you change the number of items (per dot per media) or use the margin, then this calculation will change. The JavaScript uses the calculation ItemWidth = (FullContainerWidth - (Margin * (ItemsMedia - 1))) / ItemsMedia. In the full size Desktop this would be ItemWidth = (1200 - (10*(3-1))) / 3, which is 393.33px. Or in percent you can do ItemWidth = (1200 - (10*(3-1))) / 1200 / 3, which is 32.7778% and using this percentage makes it fit perfectly. However, as soon as you change the number of items per dot/media, use margins, or the size of the container changes, those pixel values and percentages will fail to work so you will need to update it.

To load the Carousel after the the Tab is loaded you could use the Lazy Tab Content Forge component in place of "Navigation/TabsContentItem" and then put the Carousel inside it. This will allow the Carousel content to load after the Tabs are loaded. This means the width of each item will be calculated correctly. Please make sure that you start fresh or remove the additional CSS applied in the examples above before using this. Keep in mind that some of that CSS is helping to format the look of the Carousel within Service Studio's IDE but you can also achieve this by setting the Container column width. I think you can even keep the CSS because the JavaScript will ultimately override the width property in the element's style attribute.

The only drawback with this method is that it will not dynamically adjust when the screen is dynamically resized because the event handlers for detecting a resize or change to the Carousel are not implemented. Adding a new OnRender event to the Carousel and adjusting the JavaScript to add an EventListener would solve this problem. Nevertheless, on a clean refresh everything will work and the media breakpoints defined in the Carousel attributes will work. I will provide some feedback to the Product team to see if they can accommodate a solution there.

Thank you,

Anthony

Hi Anthony,

 I tried your solution and its working properly. The detailed steps were very helpful.

Thank You.

Hi Anthony,

 I tried your solution and its working properly. The detailed steps were very helpful.

Thank You. hellodear


Regards teatv

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