SfGrid Filter in Mobile Mode Hides Interface
Hi Mike,
Based on the reported issue, we understand that in mobile mode, the OK
button and other filter dialog elements are hidden when using the
stylesheet generated through Theme Studio. We have attempted to
reproduce the problem in our end. However, we were unable to replicate the
issue. For your reference, we have attached a sample and screenshot that
demonstrate the behavior observed at our end. Please review them and let us
know if the issue persists in your application.
Screenshot:
|
|
Sample: Please check the attachment.
To help us investigate further, could you please provide the following
additional details:
- Could you please share us the grid code sippet with model class?
- Could you please share a video demonstrating the issue?
- Could you please share us the Syncfusion NuGet version?
- Kindly provide a minimal sample project that reproduces the issue. Alternatively, please try to reproduce the issue using the attached sample.
Providing these details will help us analyze the issue more effectively and identify the root cause. Thank you for your cooperation!
Additionally, we were unable to open the image you attached. Could you
please reattach the image file.
|
|
Regards,
Prathap Senthil
Attachment: DataGridMobileFilter_63755d79.zip
Hi Prathap,
Sorry, one more quick question for you:
Notice how the alignment looks off in mobile? This looks really broken to me and in mobile it would seem everything is aligned automatically to a particular aspect (left, center, or right).
Is there a way to ensure mobile styling so that it does not look so disjointed?
Thank you for your continued assistance,
Michael
For further context, here's how it looks in my application:
The columns look "zig-zagged" and disjointed. It would be ideal to have the image either fully left-aligned or centered, as well. Thank you again for any assistance.
Based on the reported problem, we would like to clarify that when using vertical row rendering mode, the grid will render only based on the <tr> element, which is responsible for rendering both the header text and row values. The content alignment is determined by the TextAlign property, meaning that if it is set to Right, both the header text and values will be aligned to the right. This is the default behavior. Please refer to the attached screenshot for your reference.
|
|
If you want proper alignment, we recommend that all Grid column text be
aligned consistently when using vertical mode. This helps avoid UI
appearance you shared . Kindly refer to the code snippet and sample below for
reference.
Code Snippet:
|
<GridFilterSettings Type="@Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings> <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Dialog"></GridEditSettings> <GridAggregates> <GridAggregate> <GridAggregateColumns> <GridAggregateColumn Field=@nameof(AdaptiveDetails.Model) Type="AggregateType.Count" Format="C2"> <FooterTemplate> @{ var aggregate = (context as AggregateTemplateContext); <div> <p>Total Models: @aggregate.Count</p> </div> } </FooterTemplate> </GridAggregateColumn> </GridAggregateColumns> </GridAggregate> </GridAggregates> <GridColumns> <GridColumn Field=@nameof(AdaptiveDetails.SNO) HeaderText="S NO" TextAlign="TextAlign.Right" HeaderTextAlign="TextAlign.Left" IsPrimaryKey="true" Width="150" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Required = true })"></GridColumn> <GridColumn Field=@nameof(AdaptiveDetails.Model) HeaderText="Model" TextAlign="TextAlign.Right" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Required = true })" Width="200"></GridColumn> <GridColumn Field=@nameof(AdaptiveDetails.Developer) HeaderText="Developer" TextAlign="TextAlign.Right" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Required = true })" FilterSettings="DeveloperFilterSettings" Width="200"></GridColumn> <GridColumn Field=@nameof(AdaptiveDetails.ReleaseDate) HeaderText="Released Date" TextAlign="TextAlign.Right" EditType="EditType.DatePickerEdit" Format="yyyyMMM" Width="200"></GridColumn> <GridColumn Field=@nameof(AdaptiveDetails.AndroidVersion) HeaderText="Android Version" TextAlign="TextAlign.Right" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Required = true })" FilterSettings="VersionFilterSettings" Width="200"></GridColumn> </GridColumns> </SfGrid>
|
UG: Adaptive
Layout in Blazor DataGrid Component | Syncfusion®
Based
on the information provided, we understand that your requirement is to
left-align the Grid row elements on mobile devices using the CSS customization.
To achieve this, we recommend applying the following CSS customization. Kindly
refer to the code snippet and sample provided below for your reference.
Code Snippet:
|
<style> .e-bigger .e-grid td.e-rowcell{ text-align: left; } </style>
|
Hi Prathap,
Thank you for your reply and pardon the confusion.
I also have the following CSS that I forgot to mention:
@media screen and (max-width: 576px) {
.e-grid.e-row-responsive .e-gridcontent td[data-cell],
.e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell] {
padding-left: 12px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.e-grid.e-row-responsive .e-gridcontent td[data-cell]::before,
.e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell]::before {
position: relative !important;
display: block !important;
margin-bottom: 16px !important;
width: 100% !important;
}
.content-tab button.e-control.e-btn.button.fit {
overflow-x: auto !important;
white-space: nowrap !important;
background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,0.2)) !important;
background-position: right center !important;
background-size: 24px 100% !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important; /* 👈 Locks it right to the visible edge of the button! */
}
}
It results in the following:
Here's the markup used:
<Column T="Summary" Field=@nameof(Summary.Product) HeaderText="Product"> <Template Context="view"> <a rel='nofollow' href="@InventoryDetailsPath.Default.Get(view.Identity)">@view.Product</a> </Template> </Column> <Column T="Summary" Field=@nameof(Summary.Sales) HeaderText="Total/Sold/Remaining" Type="ColumnType.Integer" AllowSorting="false" AllowFiltering="false" AutoFit="true"> <Template Context="view"> <ContentView TValue="SummarySales" Content="@view.Sales" Context="sales"> <ChildContent>@sales.Total.ToString("N0")/@sales.Sold.ToString("N0")/@sales.Remaining.ToString("N0")</ChildContent> <NotFoundTemplate>N/A</NotFoundTemplate> </ContentView> </Template> </Column> <Column T="Summary" Field=@nameof(Summary.Created) HeaderText="Created" Type="ColumnType.DateTime" FilterSettings="@DateTimeFilterSettings.Default" AutoFit="true"> <Template Context="view"> <Starbeam.Presentation.Components.WhenTooltip When="@view.Created"/> </Template> </Column> <Column T="Summary" Field=@nameof(Summary.Views) HeaderText="Views" Type="ColumnType.Integer" TextAlign="TextAlign.Center" AutoFit="true" Format="N0"/> <Column T="Summary" Field=@nameof(Summary.Wanted) HeaderText="Wanted" Type="ColumnType.Integer" TextAlign="TextAlign.Center" AutoFit="true" Format="N0"/>
You can see the green use templates (good), but the red do not, resulting in raw text without a surrounding div (bad) I mentioned earlier.
Thank you for your continued assistance.
Thank you for the update.
Based on your explanation, we would like to clarify that the <div> wrapper surrounding the template column is the default behavior. As mentioned in your update, the CSS class .e-grid.e-row-responsive .e-gridcontent td.e-rowcell has been applied, and this styling affects all rows in the Grid. For your reference, we have attached a sample and screenshot demonstrating the current behavior.
Screenshot:
|
|
To help us validate and investigate the issue further, could you kindly provide the following details?
- Could you please explain the exact issue you are encountering when using the CSS classes you mentioned?
- Could you please share your specific requirement for applying these CSS classes?
- Please provide a simple, reproducible sample that demonstrates the issue. Alternatively, you may modify the previously shared sample to reproduce the behavior.
Once we receive these details, we will analyze the rendering behavior in greater detail and provide an appropriate solution. We look forward to hearing from you.
Hi Prathap,
Thank you so very much for your patience and for providing that sample. I was able to reproduce a very simple example here:
https://blazorplayground.syncfusion.com/LjVRZbDgJumUwCvg
You can see that the normal column does not pad right (red) while the templated column does pad right (green):
If you are able to provide rules/styling so that the normal pads exactly like templated, I would greatly appreciate it.
Thank you again for your amazing assistance and support!
Michael
Thanks
for the update,
Based on your requirement, we would like to clarify that the CSS is applied to
the template column but not to the normal column because the template column
contains a child <div> element, whereas the normal column does not. This
is the default behavior of the component. As a result, the CSS is applied only
to the template column cells and not to the normal column cells. To achieve
your requirement, we recommend using the solution provided below based on your
specific needs. Kindly refer to the following code snippet and sample for your
reference.
|
<style> .e-bigger .e-grid td.e-rowcell { text-align: left !important; }
.e-grid.e-row-responsive .e-gridcontent td[data-cell]::before, /* Header (Label generated from data-cell via ::before) */ .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell]::before { position: relative !important; display: block !important; width: 100% !important; margin-bottom: 16px !important; text-align: left !important; right: 32px; left: unset; }
.e-grid.e-row-responsive .e-gridcontent td[data-cell], /* Cell Content */ .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell] { padding-left: 10% !important; width: 100% !important; box-sizing: border-box !important; }
.e-grid.e-row-responsive .e-gridcontent td.e-rowcell { background-color: aquamarine; color: blue; } </style>
|
