I am using Blazor Server .NET 7 with Blazor Quick Grid(0.1.0-alpha.22351.1). My Pager is full width of the Browser Window but my grid width is very small. how can i make my pager to be of the same width as my Grid ?
Here is my Code
<QuickGrid ItemsProvider="UserStoryProvider" Pagination="_PaginationState">
<PropertyColumn Property="@(p => p.PracticeAreaName)" Sortable="true" IsDefaultSort="SortDirection.Ascending" />
<PropertyColumn Property="@(p => p.StateName)" Sortable="true" />
<PropertyColumn Property="@(c => c.UserStory)" Sortable="true" />
<PropertyColumn Property="@(p => p.IsCaseWithAnotherAttorney)" Sortable="true" Title="Assinged?" />
<PropertyColumn Property="@(p => p.DateOfIncident)" Sortable="true" Format="dd MMM yyyy" />
<TemplateColumn Title="Action" Align="Align.Center">
<ChildContent Context="templateContext">
<button type="button" class="btn btn-primary ms-2 mt-1" @onclick="@(()=> EditUserStory(templateContext.UserStoryID_PK))">view</button>
</ChildContent>
</TemplateColumn>
</QuickGrid>
<Paginator Value="@_PaginationState"></Paginator>
You can wrap the whole thing in a div
and set the width
to fit-content
:
<div style="width:fit-content">
<QuickGrid ItemsProvider="UserStoryProvider" Pagination="_PaginationState">
<PropertyColumn Property="@(p => p.PracticeAreaName)" Sortable="true" IsDefaultSort="SortDirection.Ascending" />
<PropertyColumn Property="@(p => p.StateName)" Sortable="true" />
<PropertyColumn Property="@(c => c.UserStory)" Sortable="true" />
<PropertyColumn Property="@(p => p.IsCaseWithAnotherAttorney)" Sortable="true" Title="Assinged?" />
<PropertyColumn Property="@(p => p.DateOfIncident)" Sortable="true" Format="dd MMM yyyy" />
<TemplateColumn Title="Action" Align="Align.Center">
<ChildContent Context="templateContext">
<button type="button" class="btn btn-primary ms-2 mt-1" @onclick="@(()=> EditUserStory(templateContext.UserStoryID_PK))">view</button>
</ChildContent>
</TemplateColumn>
</QuickGrid>
<Paginator Value="@_PaginationState"></Paginator>
</div>