RightToLeft Direction in BitCarousel causing display issues

[hootanht]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

GitHub Issue for BitPlatform: RightToLeft Direction in BitCarousel causing display issues

Issue Description: When using the RightToLeft Direction in BitCarousel, the carousel breaks, and the last image covers the section. Additionally, when the image changes, it goes under the image that was previously displayed. Removing the RightToLeft Direction resolves the issue.

Code Snippet:

<BitCarousel InfiniteScrolling="true" Direction="BitDirection.RightToLeft" Style="@(MustShoeImage? "width: 100%;height: 211px;" : "display:none")">
    @foreach (var image in Images)
    {
        <BitCarouselItem>
            <img class="image set-max-width carouselItem-image" src="@image" @onload="HandleImageOnLoaded" @onerror="HandleVehicleMarkerImageError" />
        </BitCarouselItem>
    }
</BitCarousel>

Environment:

• BitPlatform Template Version: v-8.7.1
• Browser/Device: Chrome-Android , Safari-IOS , Edge-Windows

Screenshots/Additional Information:

https://github.com/bitfoundation/bitplatform/assets/27281206/36731e12-1715-4147-8a67-4ea930d0d4f5

Note: Please prioritize fixing this issue as it affects the live product. Keep us informed about the progress and resolution. Thank you!

Expected Behavior

The BitCarousel should function correctly when using the RightToLeft Direction, and images should display without covering the section or going under the previously shown image.

Steps To Reproduce

1. Use the provided code snippet with RightToLeft Direction in BitCarousel.
2. Observe the carousel breaking and the last image covering the section.
3. Notice that when the image changes, it goes under the previously displayed image.

Exceptions (if any)

No response

.NET Version

8.0.100

Anything else?

Additional Information:

• Issue is impacting the live product.
• The issue does not occur when the RightToLeft Direction is not used.

Hope this video helps :

https://github.com/bitfoundation/bitplatform/assets/27281206/d95db681-1128-4907-8113-df09959d543f

[msynk]

Thanks for contacting us. We're investigating this issue. We'll let you know if it's possible to work on this issue.

[msynk]

@hootanht I believe there is something in your custom CSS styles that conflicts with the CarouselItem style that creates this issue since the RTL sample in the Carousel demo page works fine. Could you please share the source code so we can check the problem?

[hootanht]

Sure, here is the custom CSS : 

.carousel-wrapper {
    ::deep .bit-icon--ChevronRight {
        background: url("./images/icons/chevron-right.svg") center/cover
            no-repeat !important;
        color: transparent !important;
    }

    ::deep .bit-icon--ChevronLeft {
        background: url("./images/icons/chevron-left.svg") center/cover
            no-repeat !important;
        color: transparent !important;
    }

    ::deep .bit-csl-rbt {
        outline: 0;
        opacity: 1 !important;
        text-decoration: none;
        color: var(--bit-clr-act-hover-fg-pri);
    }

    ::deep .bit-csl-lbt {
        outline: 0;
        opacity: 1 !important;
        text-decoration: none;
        color: var(--bit-clr-act-hover-fg-pri);
    }

    ::deep .bit-csl-dot .current {
        background-color: $primary-sky-night !important;
        width: 10px !important;
        height: 10px !important;
    }

    ::deep .bit-csl-dot {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    ::deep .bit-csl-dot div {
        border-radius: 50% !important;
        width: 7px !important;
        height: 7px !important;
        display: inline-block;
        margin-right: 5px !important;
        margin-left: 0px !important;
        background-color: $primary-soap !important;
    }
}

.carouselItem-image {
    height: 200px;
    display: block;
    margin: auto;
}

.set-max-width {
    max-width: 500px;
}

[hootanht]

Dear Saleh, I uploaded another video that talks about this problem and hope this will help you.

[hootanht]

@msynk

[msynk]

@hootanht Thanks for the additional data.

first, overriding internal/undocumented CSS classes is not recommended and should not be used IMO since we might overhaul these in the future and your code might break. please file issues for your requirements so we can add new features to support our customer's needs.

second, it seems the issue is coming from this style: could you please remove these CSS styles and let me know the result?

third, it would be much better to share the whole source code so we can also debug the problem.

[hootanht]

Dear @msynk,

The issue at hand is not caused by CSS code. I have thoroughly tested various scenarios, and as of now, a solution has been identified. However, it comes at the cost of sacrificing our primary functionality, namely, displaying the carousel in a right-to-left orientation for our Persian customers.

In the scenario that I tested without encountering any issues (excluding the commenting out of SCSS codes), I removed InfiniteScrolling and Direction from the code. While this approach resolves the problem, it regrettably eliminates the right-to-left feature for our Persian clientele.

    <div class="carousel-wrapper">
        @if (Images?.Any() ?? false)
        {
            <BitCarousel Style="@(MustShoeImage? "width: 100%;height: 211px;" : "display:none")">
                @foreach (var image in Images)
                {
                    <BitCarouselItem>
                        <img class="image set-max-width carouselItem-image" src="@image" @onload="HandleImageOnLoaded" @onerror="HandleVehicleMarkerImageError" />
                    </BitCarouselItem>
                }
            </BitCarousel>
        }
    </div>

[msynk]

@hootanht It seems I didn't clearly express what I need. I need a full source code (a zip file or a github repo or ...) to start investigating the problem. btw, I've tested different scenarios with our carousel component, and each one works fine. so I need a reproduction of the problem from your side to investigate further.

[hootanht]

dear @msynk I created a repository and applied I style and functionality that we have including layout. but everything is fine. Can we have a meeting to solve this problem?

https://github.com/hootanht/CarouselProblem

If yes, I DM, you.

[hootanht]

@msynk Can we check this problem tomorrow?