Full width horrizontal scroll in a Dialog.

[Valkozaur]

I am trying to implement a Full width horizontal scroll in a Dialog but I can't get it to work.
By applying:

<FluentDialogBody>
    <div style="width:100%;height:100%;">
        <FluentHorizontalScroll class="full-width" Speed="1200" Easing="ScrollEasing.EaseInOut">
            <FluentCard>Card number 1</FluentCard>
            <FluentCard>Card number 2</FluentCard>
            <FluentCard>Card number 3</FluentCard>
            <FluentCard>Card number 4</FluentCard>
            <FluentCard>Card number 5</FluentCard>
            <FluentCard>Card number 6</FluentCard>
        </FluentHorizontalScroll>
    </div>
</FluentDialogBody>

with style:

::deep .full-width,
::deep .full-width fluent-card {
    height: 100%;
    width: 100%;
}

I manage to get the horizontal scroll the same size as the body of the dialog, but the cards do not change size:

[vnbaaij]

FluentCard uses a couple of css variables to define its width and height. Use the Width and Height parameters of the component to set those up

[oneolddev]

@Valkozaur

FluentHorizontalScroll is thin wrap around the fluent-horizontal-scroll web component. This web component has some limitations:

1. It can only take widths as values not percentages
2. It is not responsive. So if you change the size of the your page dynamically the cards remain the same size.

I believe you are attempting to achieve something like the following where the FluentDialogBody takes up the width of the available space. In the example below, I use the viewport size and knowledge of the layout. With a Blazor app created with the fluent project template, replace the content of the Home.razor with:

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<div>
    <FluentDialogBody class="container containerSize">
        <FluentHorizontalScroll class="full-width containerSize" Speed="1200" Easing="ScrollEasing.EaseInOut">
            <FluentCard>Card number 1</FluentCard>
            <FluentCard>Card number 2</FluentCard>
            <FluentCard>Card number 3</FluentCard>
            <FluentCard>Card number 4</FluentCard>
            <FluentCard>Card number 5</FluentCard>
            <FluentCard>Card number 6</FluentCard>
        </FluentHorizontalScroll>
    </FluentDialogBody>
</div>

add a Home.razor.css file

::deep .containerSize {
    --containerWidth: calc(100vw - 3rem);
    --containerHeight: 200px;
}

::deep .container {
    border: red solid 1px;
    padding: 40px;
    width: var(--containerWidth);
    height: var(--containerHeight);
}

::deep .full-width,
::deep .full-width fluent-card {
    width: calc(var(--containerWidth) - 80px);
    height: calc(var(--containerHeight) - 80px);
}

@media (width > 600px) {
    ::deep .containerSize {
        --containerWidth: calc(100vw - 320px);
    }
}

Note: There is a limitation. Full page scrolling will not work if the width of the page is changed after it's first displayed.

[oneolddev]

FluentHorizontalScroll is thin wrap around the fluent-horizontal-scroll web component. This web component can only take widths as values not percentages.

<style>
    .containerSize {
        --containerWidth: 300px;
        --containerHeight: 200px;
        --containerPadding: 25px;
    }

    .container {
        width: var(--containerWidth);
        height: var(--containerHeight);
        padding: var(--containerPadding);
        border: solid blue 1px; /* show size of container */
    }

    .full-width,
    .full-width fluent-card {
        width: calc(var(--containerWidth) - var(--containerPadding)*2);
        height: calc(var(--containerHeight) - var(--containerPadding)*2);
    }
</style>

<FluentDialogBody Class="container containerSize">
    <FluentHorizontalScroll class="full-width containerSize" Speed="1200" Easing="ScrollEasing.EaseInOut">
        <FluentCard>Card number 1</FluentCard>
        <FluentCard>Card number 2</FluentCard>
        <FluentCard>Card number 3</FluentCard>
        <FluentCard>Card number 4</FluentCard>
        <FluentCard>Card number 5</FluentCard>
        <FluentCard>Card number 6</FluentCard>
    </FluentHorizontalScroll>
</FluentDialogBody>