Pivot Table wrong responsive behavior

[Nelson]

Hi.
When the page is renderized the pivot is adapted to the max width of the container, but when data is loaded or updated the grid doesnt adapt and overflow the container width.

The second problem appears when the pivot table is already renderized and filter are added the rows height doesnt match with the rows of the others columns.


        <div class="container ml-0 p-3" style="max-width:81vw !important;overflow:">
            <div class="row px-2 py-2" style="border: 1px solid; border-bottom: none; border-color: #dee2e6; border-radius: 5px 5px 0 0 ">
                <SfButton OnClick="OnExcelExport" Content="Exportar a Excel" CssClass="m-2"></SfButton>
                <SfButton OnClick="OnPdfExport" Content="Exportar a PDF" CssClass="m-2"></SfButton>
            </div>
            <div class="row">
                <SfPivotView @ref="@pivot"
                             TValue="CommercialDocumentPivotDTO"
                             Width="100%"
                             AllowPdfExport="true"
                             ShowGroupingBar="true"
                             ShowFieldList="true"
                             AllowExcelExport="true"
                             AllowDataCompression="true">
                    <PivotViewDataSourceSettings DataSource="dataSource">
                        <PivotViewRows>
                            <PivotViewRow Name="SellerType" Caption="Tipo de Vendedor"></PivotViewRow>
                            <PivotViewRow Name="SellerName" Caption="Vendedor"> </PivotViewRow>
                        </PivotViewRows>
                        <PivotViewColumns>
                            @*<PivotViewValue Name="Number" Caption="Nro."></PivotViewValue>
                            <PivotViewValue Name="StateId" Caption="Estado"></PivotViewValue>
                            <PivotViewValue Name="TotalInvoice" Caption="Total"></PivotViewValue>*@
                        </PivotViewColumns>
                        <PivotViewValues>
                            <PivotViewValue Name="TotalFC" Caption="Monto Factura"> </PivotViewValue>
                            <PivotViewValue Name="TotalNC" Caption="Monto Credito"> </PivotViewValue>
                            <PivotViewValue Name="TotalRC" Caption="Monto Recibo"> </PivotViewValue>
                        </PivotViewValues>
                        <PivotViewFormatSettings>
                            <PivotViewFormatSetting Name="TotalRC" Format="C2" UseGrouping="false" Currency='AR'></PivotViewFormatSetting>
                            <PivotViewFormatSetting Name="TotalNC" Format="C2" UseGrouping="false" Currency='AR'></PivotViewFormatSetting>
                            <PivotViewFormatSetting Name="TotalFC" Format="C2" UseGrouping="false" Currency='AR'></PivotViewFormatSetting>
                        </PivotViewFormatSettings>
                        <PivotViewFieldMapping>
                            @*<PivotViewField Name="TypeId" Caption="Tipo ComprobanteID"></PivotViewField>*@
                            <PivotViewField Name="SellerCode" Caption="Codigo de Vendedor"></PivotViewField>
                            <PivotViewField Name="CommercialDocumentType" Caption="Tipo de Comprobante"></PivotViewField>
                            <PivotViewField Name="CommercialDocument" Caption="Numero de Comprobante"></PivotViewField>
                            @*<PivotViewField Name="SellerId" Caption="Codigo de Vendedor"></PivotViewField>*@
                            <PivotViewField Name="CustomerName" Caption="Cliente"></PivotViewField>
                            <PivotViewField Name="CustomerCode" Caption="Codigo de Cliente"></PivotViewField>
                            <PivotViewField Name="EmissionDate" Caption="Fecha de Emisión"></PivotViewField>
                            <PivotViewField Name="DocumentNumber" Caption="Numero de Documento"></PivotViewField>
                            @*<PivotViewField Name="CustomerId" Caption="ClienteID"></PivotViewField>*@
                            <PivotViewField Name="SaleNote" Caption="Nota de Venta"></PivotViewField>
                            <PivotViewField Name="InvoiceImputation" Caption="Comprobante Relacionado"></PivotViewField>
                            <PivotViewField Name="DeliveryNote" Caption="Nota de Remito"></PivotViewField>
                            @*<PivotViewField Name="SellerTypeId" Caption="Tipo de Venta ID"></PivotViewField>*@
                        </PivotViewFieldMapping>
                    </PivotViewDataSourceSettings>
                    <PivotViewGridSettings AllowResizing="true" AutoFit="true"></PivotViewGridSettings>
                </SfPivotView>
            </div>
        </div>

Waiting for your answer, thanks.
Regards

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Nelson,

Please find the response below:

Query	Comments
When the page is renderized the pivot is adapted to the max width of the container, but when data is loaded or updated the grid doesnt adapt and overflow the container width.	We have checked your given code, and we would like to inform you that the reported problem is caused by the padding that was applied to the parent element, which is ignored when determining the offsetWidth of the element. The Pivot table always renders based on the offsetHeight and offsetWidth of its parent while using percentage width and height. Please refer the screenshot below. Therefore, to resolve the reported problem at your end, we recommend you to remove the padding to the parent element.Please refer the below code example.   Code example: <style>    .row>*{         padding-right: 0px !important;         padding-left: 0px !important;     } </style>   However, we have prepared a sample for your convenience. Please find the below link.   Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotTable1537752325   Output screenshot:
The second problem appears when the pivot table is already renderized and filter are added the rows height doesnt match with the rows of the others columns.	We have checked the reported issue and we are unable to reproduce it at our end. Please refer the sample and screenshot below for your reference.   Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotTable-505246077   Screenshot: If the problem persists, please reproduce it in the provided sample and revert to us (or) send your sample that replicates the problem. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible.

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.