Combo Page Size displaying wrong place

I have been trying to find how to fix this, but nothing

Here is my code and a screen shoot

I will appreciate some help

            <SfGrid ID="Grid"

                     @ref="gridObj"

                     DataSource="@colMaterials"

                     AllowPaging="true"

                     AllowSorting="true"

                     AllowResizing="true"

                     AllowReordering="true"

                     AllowFiltering="true"

                     AllowExcelExport="true"

                     AllowPdfExport="true"

                     AllowMultiSorting="true"

                     AllowRowDragAndDrop="false"

                     AllowSelection="true"

                     AllowTextWrap="true">

              <GridPageSettings PageSize="10" pageSizes="@(new string[] { "10","25","50","100","500","All" })" />


              <GridEvents CommandClicked="OnCommandClicked" TValue="MaterialTable"></GridEvents>

                <GridColumns>

                <GridColumn HeaderText="" TextAlign="TextAlign.Left" Width="110">

                        <GridCommandColumns>

                            <GridCommandColumn Type=CommandButtonType.Edit

                                               ButtonOption="@(new CommandButtonOptions()

                                                               {IconCss="e-icons e-edit", CssClass="e-flat" })">

                            </GridCommandColumn>

                            <GridCommandColumn Type=CommandButtonType.Delete

                                               ButtonOption="@(new CommandButtonOptions()

                                                               {IconCss="e-icons e-delete", CssClass="e-flat" })">

                            </GridCommandColumn>

                        </GridCommandColumns>

                    </GridColumn>

                    <GridColumn IsPrimaryKey="true" Field=@nameof(MaterialTable.Id)

                                HeaderText="ID #" TextAlign="@TextAlign.Left" Width="70">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Description)

                                HeaderText="Description" TextAlign="@TextAlign.Left" FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })" Width="250">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Unit)

                                HeaderText="Unit" TextAlign="@TextAlign.Left" Width="80">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Qty)

                                HeaderText="Qty" TextAlign="@TextAlign.Left" Width="80">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Price)

                                HeaderText="Price" TextAlign="@TextAlign.Left" Width="80">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Vendor)

                                HeaderText="Vendor" TextAlign="@TextAlign.Left" FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })" Width="150">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Phone)

                                HeaderText="Phone" TextAlign="@TextAlign.Left" FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })" Width="150">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Link)

                                HeaderText="Link" TextAlign="@TextAlign.Left" FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })" Width="80">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.Date)

                                HeaderText="Date" TextAlign="@TextAlign.Left" Width="80">

                    </GridColumn>

                    <GridColumn Field=@nameof(MaterialTable.User)

                                HeaderText="User" TextAlign="@TextAlign.Left" Width="80">

                    </GridColumn>


                </GridColumns>


    </SfGrid>





3 Replies

RS Renjith Singh Rajendran Syncfusion Team February 7, 2022 07:08 AM UTC

Hi Juan, 
 
Greetings from Syncfusion support. 
 
We are not clear about the exact scenario you are facing the reported problem. We checked this by preparing a sample based on your shared codes, but we could not face the reported problem. The pager dropdown popup displays fine with the sample from our side. We are attaching the sample for your reference, please download and refer the sample form the link below, 
 
Please refer the screenshot below, 
 
 
Kindly refer the above sample and check this from your side. If you are still facing difficulties then the following details would be helpful for us to proceed further. 
 
  1. Share the exact scenario you are facing the reported problem.
  2. Share a simple issue reproducing sample for us to validate.
  3. Or if possible reproduce the problem with the above attached sample and share with us for further analysis.
  4. Share the Syncfusion version details you are using.
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Renjith R 
 



JM Juan Maggi February 21, 2022 04:05 AM UTC

Thanks for your help, and I am sorry for not coming back to do a follow up.


I found that my css for my menu was messing with my datagrid and its components, so what I did is I changed my menu and I create a Syncfusion menubar and then I eliminate the CSS that I had for my menu, and everything started working fine.





RS Renjith Singh Rajendran Syncfusion Team February 21, 2022 02:57 PM UTC

Hi Juan, 
 
Thanks for your update. Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


Loader.
Up arrow icon