Spreadsheet Sizing

[Frank]

Hello,

I'm struggling with setting the size of the spreadhseet in a .NET Maui Hybrid app.

It is always to large and scrollbars are visible. I want to fit the whole Blazor page into the remaining part of the page (fill the second row of the Grid in xaml).

Can you give me some guidance how to achieve thishelp how I can achive this?

My MainPage.xaml looks like that

    <Grid RowDefinitions="Auto, *" RowSpacing="12" Margin="6,12,6,0">
        <Button Grid.Row="0" Text="Open File"
                Clicked="OnFileOpenClicked"
                HorizontalOptions="Start"/>
        <Button Grid.Row="0" Text="Call method"
                Clicked="OnCallClicked"
                HorizontalOptions="End"/>
        <BlazorWebView x:Name="blazorWebView" Grid.Row="1" HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type components:Input}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </Grid>

And the code in my razor page is

@page"/input"

<div class="container">
    <h1>Enter the data here if you like!</h1>
    <div class="speechtext-container" style="background-color:yellow">
        <SfSpeechToText@bind-Transcript="@transcript"@ref="SpeechToTextRef"SpeechRecognitionStarted="@HandleStartRecognition"
                        SpeechRecognitionStopped="@HandleStopRecognition"
                        SpeechRecognitionError="@HandleSpeechRecognitionError"
                        TranscriptChanging="@HandleTranscriptChange"></SfSpeechToText>
        <SfTextAreaRowCount="5"ColumnCount="50"@bind-Value="@transcript"ResizeMode="Resize.None"Placeholder="Transcribed text will be shown here..."></SfTextArea>
    </div>
    <SfSpreadsheet@ref="SpreadsheetRef"AllowEditing=trueSelected="OnCellSelected">
    </SfSpreadsheet>
</div>

<style>
    h1 {
        text-align: center;
        color: white;
    }


    .sheet-container {
        margin:auto;
        gap:10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: lightgray;
    }

    .container {
        height:100%;
        background-color: darkviolet
    }

    .speechtext-container {
        margin:auto;
        gap:20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

The page renders to this and I want to get rid of the  vertical scrollbars. I have set elements in index.html to red and blue.

​

[Santhanalakshmi Ramachandran]

Hi Frank,

Thank you for reaching out to us.

We have validated the reported query based on the shared and we’ve implemented a layout fix to address the vertical scrollbar issue by ensuring all components dynamically fit within the viewport. The top-level container is set to height: 100vh with overflow: auto, allowing any additional components rendered below the spreadsheet to remain visible without introducing unnecessary scrollbars.

To accommodate the fixed header, we calculated the height of the second-level parent using height: calc(100vh - 3.5em). This ensures that the content area below the header adjusts precisely to the remaining viewport space. The spreadsheet component is placed inside a dedicated container with height: 100%, allowing it to fully occupy the available space within its parent without causing overflow.

This approach uses responsive units (vh, em, and calc) to maintain consistent behavior across screen sizes and resolutions. It avoids hardcoded pixel values and ensures that dynamic content renders correctly without layout shifts or scrollbars.

For reference, we’ve included our project and sample implementation along with the output screenshot below.

@page "/"

@using Syncfusion.Blazor.Inputs

<div class="container">

      <div>

            <h1>Enter the data here if you like!</h1>

 

            <div class="speechtext-container" style="background-color:yellow">

                  <SfSpeechToText></SfSpeechToText>

                  <SfTextArea RowCount="5"

                                    ColumnCount="50"

                                    Placeholder="Transcribed text will be shown here...">

                  </SfTextArea>

            </div>

      </div>

      <div class="bottom">

            <SfSpreadsheet Height="100%">

            </SfSpreadsheet>

      </div>

</div>

 

<style>

      

      h1 {

            text-align: center;

            color: white;

      }

      .sheet-container {

            margin: auto;

            gap: 10px;

            display: flex;

            flex-direction: column;

            align-items: center;

            background-color: lightgray;

      }

      .container {

           height: 100%;

           background-color: darkviolet;  

display: flex;

flex-direction: column; 

      }

      .speechtext-container {

            margin: auto;

            gap: 20px;

            display: flex;

            flex-direction: column;

            align-items: center;

            margin: 10px;

      }

      .bottom {

            min-height: 0;

            min-width: 0;

            display: block;

      }

      #app {

            overflow: auto;

            height: 100vh;

      }

      .content{

            height: calc(100vh - 3.5em);

      }

</style>

Sample: Please refer to the attachment.

Output screenshot:

Please review the above shared details and implement the same to resolve the reported issue on your end. If the issue still persists on your end, please share your project or a reproducible sample so we can verify the layout and assist further.

Regards,

Santhanalakshmi.

Attachment: MauiApp_bc7e5142.zip

[Frank]

Hello,

this works when the app is started but if you use the app on a Windows device the spreadsheet does not resize when you resize the app. This is not a common szneario on mobile devices but on Windows this is common.

If you change the size of your app the spreadhsheet's size is always the same. The hardcopy below shows that when you enlarge the app. But the same is true when you make it smaller. The spreadsheet always stays the same size.

[Frank]

Hello,

this works when the app is started but if you use the app on a Windows device the spreadsheet does not resize when you resize the app. This is not a common szneario on mobile devices but on Windows this is common.

If you change the size of your app the spreadhsheet's size is always the same. The hardcopy below shows that when you enlarge the app. But the same is true when you make it smaller. The spreadsheet always stays the same size.

[Santhanalakshmi Ramachandran]

Hi Frank,

Thank you for providing the information. We have reviewed the reported behavior where the Spreadsheet component’s height does not automatically adjust when the browser window is resized on Windows devices. Upon validation, we were able to reproduce the issue. As a result, we have logged a bug report titled “Spreadsheet Height Not Responsive to Browser Window Resizing”. The fix for this issue will be included in our first weekly release of October 2025. You can track the status of this issue using the feedback link below:

Feedback: Spreadsheet Height Not Responsive to Browser Window Resizing in Blazor | Feedback Portal

Disclaimer: “Inclusion of this solution in the release may change due to other factors including but not limited to QA checks and works re prioritization”.

We appreciate your patience and understanding. Please let us know if you have any further questions or concerns.

Regards,

Santhanalakshmi.

[Santhanalakshmi Ramachandran]

Hi Frank,

 

We are glad to announce that our weekly patch release (31.1.23) is rolled out. And we have included the fix for the reported "Spreadsheet Height Not Responsive to Browser Window Resizing" issue in this release. Please find the NuGet package for latest fixes and features from below.

  

Package Link: NuGet Gallery | Syncfusion.Blazor.Spreadsheet 31.1.23

 

Feedback Link:  Spreadsheet Height Not Responsive to Browser Window Resizing in Blazor | Feedback Portal

For your reference, we’ve included a sample application and GIF to showcase the resolved behavior.

Sample Application: Please refer to the attachment

Issue Root Cause:

The issue occurred because the sheet panel height wasn’t updating correctly when the spreadsheet height was set using percentage values (e.g., 100%, 20%). The logic failed to calculate the height based on the actual spreadsheet size and didn’t respond to browser window resizing. This issue has now been resolved by calculating the height properly.

 

Please let us know if you have any further questions or concerns.

 

Regards,
Santhanalakshmi.

Attachment: MauiApp_e005de1c.zip