SfGrid missing horizontal scroll bar inside tab page when SfPdfViewer2 is used

[Leigh Anderson]

Hi team

I'm having an issue with a missing horizontal scrollbar on an SfGrid.

The grid is within a SfTab page.

Below the SfTab component I have an SfPdfViewer2.

With this arrangement the horizonal scrollbar is missing if the screen is narrower than the grid content:

If I remove the SfPdfViewer2 the scrollbar is displayed:

If I remove the SfTab and just have the SfGrid and SfPdfViewer2 it also displays the scrollbar:

Here is the code with all 3 components:


<div style="width: calc(100vw - 20rem);">


    <SfTab>


        <TabItems>


            <TabItem>
                <ChildContent>
                    <TabHeader Text="First Tab"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <SfGrid DataSource="@oDocBrow" AllowTextWrap=false Height="100" Width="100%" RowHeight="22">




                        <GridColumns>
                            <GridColumn Field="field1" HeaderText="Field1" Width="160"></GridColumn>
                            <GridColumn Field="field2" HeaderText="Field2" Width="200" ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
                            <GridColumn Field="field3" HeaderText="Field2" Width="200" ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
                            <GridColumn Field="field4" HeaderText="Field2" Width="200" ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
                            <GridColumn Field="field5" HeaderText="Field2" Width="200" ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
                            <GridColumn Field="field6" HeaderText="Field2" Width="200" ClipMode="ClipMode.EllipsisWithTooltip"></GridColumn>
                        </GridColumns>


                    </SfGrid>
                </ContentTemplate>
            </TabItem>




        </TabItems>


    </SfTab>
    <SfPdfViewer2  DocumentPath="@pdfdata">
    </SfPdfViewer2>


</div>


@code {
    public string pdfdata;


    public List<DocumentEntry> oDocBrow { get; set; }


    public class DocumentEntry
    {
        public int? field1 { get; set; }
        public string field2 { get; set; }
        public string field3 { get; set; }
        public string field4 { get; set; }
        public string field5 { get; set; }
        public string field6 { get; set; }
    }


    protected override void OnInitialized()
    {
        oDocBrow = new List<DocumentEntry>();


        DocumentEntry oDoc = new DocumentEntry();


        oDoc.field1=1;
        oDoc.field2="hello";
        oDoc.field3 = "world";
        oDoc.field4 = "testing";
        oDoc.field5 = "testing";
        oDoc.field6 = "1 2 3";


        oDocBrow.Add(oDoc);
    }
}

How do I get the scrollbar to work with all 3 components?

Thanks

Leigh

[Leigh Anderson]

Actually the horizontal and vertical scrollbars are missing.

If you add more rows to that table you'll see there is no vertical scrollbar either.

Leigh

[Naveen Palanivel]

Hi Anderson,

Greetings from Syncfusion Support.

We checked your query and we suspect that horizontal scroll bar is not present in the SfGrid within the tab page when using SfPdfViewer2. we have provided a solution using CSS style. please refer the code snippet and modified sample for your reference.

 

<style>

 

    .e-grid .e-gridcontent {

        overflow-x: auto;

       

 

    }

 

 

</style>

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

Attachment: Blazor_Scrollbar_98dee41b.zip

[Leigh Anderson]

Thanks Naveen

Added overflow-y: auto; as well and all working fine now.

Leigh

[Monisha Saravanan]

Hi Leigh,

Welcome. We are glad to hear that the reported issue has been resolved at your end. Kindly get back to us if you have further queries. As always we will be happy to assist you.