grid table taking only 50 percent of width when contents have less charecters

4 Replies
2 Participants

Created by
JK jose KJ

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Jan 22, 2025 11:27 AM UTC

Last Activity On
Jan 27, 2025 07:49 AM UTC

Want to subscribe?
SIGN IN

Image_7912_1737544929812

var country = context as Country;

}

<button class="btn btn-edit" type="button" @onclick='(() => OpenEditModal("Edit", country))'>

</button>

<button class="btn btn-delete" type="button" @onclick="() => DeleteRecord(country)">

</button>

</Template>

</GridColumn>

</GridColumns>

</GridSortColumns>

</GridSortSettings>

</SfGrid>

</div>

i could make it take 100% width by adding below style

.e-virtualtable {

position: static !important;

transform: none !important;

}

but above style causing another issue https://www.syncfusion.com/forums/195161/enabling-virtualization-causing-items-loaded-onscroll-becomming-invisible

Thanks

4 Replies

SK Sanjay Kumar Suresh Syncfusion Team January 23, 2025 11:10 AM UTC

Hi Jose,

We have tested the shared grid code by binding local data and verified that the reported issue does not occur on our end. Additionally, we ensured this by removing the shared CSS, but the issue still could not be reproduced. Could you please provide a simplified issue-replicating sample or modify the below provided sample to demonstrate the issue?

Sample Ensured from our end:

https://blazorplayground.syncfusion.com/embed/rXhetCrgqnSuoESS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,

Sanjay Kumar Suresh

JK jose KJ January 24, 2025 07:44 AM UTC

i am still facing the issue in my code, but code u shared works correctly
<body><div id="toast-bc35a13e-a478-407f-acf7-6f0fe6f73508" class="e-control e-toast e-lib e-toast-container " style="position: fixed; " _bl_8291bf62-d553-4220-aae8-d5a10f8d6c3b=""></div>

<div style=" height:calc(100vh - 10rem);"><div id="sfgrid2l3bto3fzov" tabindex="-1" class="sf-grid e-grid e-control e-responsive e-default e-gridhover e-grid-height e-wrap e-bigger e-row-responsive" style="width:100%;height:100%;" role="grid" _bl_2421ca15-eec0-49c8-84cd-43e1cfa2141a="">

<div class="e-spinner-pane e-spin-hide" style="z-index: auto;" role="alert" aria-label="Loading" _bl_8b3a096b-5137-46c6-83e2-67dc2aff58de=""><div class="e-spinner-inner"></div></div><div class="e-spinner-pane e-spin-hide" style="z-index: auto;" role="alert" aria-label="Loading" _bl_21a52cea-bd64-45a0-bff0-f3592a0fda70=""><div class="e-spinner-inner"></div></div><div class="e-gridheader"><div class="e-headercontent e-lib e-droppable" style=""><table class="e-table e-sortfilter" id="sfgrid2l3bto3fzov_header_table" cellspacing="0.25px" role="presentation"><caption class="e-hide">sfgrid2l3bto3fzov_header_table</caption>

<colgroup id="sfgrid2l3bto3fzovheadercolGroup"><col style="width: 80px"><col style="width: 120px"><col style="width: 120px"><col style="width: 150px"></colgroup>

<thead role="rowgroup"><tr role="row" class="e-columnheader"><th class="e-headercell e-leftalign e-mousepointer e-fltr-icon " data-uid="gridcell-55" role="columnheader" tabindex="0" aria-colindex="1" data-colindex="0" style="" aria-sort="descending" rowspan="1" colspan="1" aria-describedby="headerTitle-grid-column12"><div e-mappinguid="grid-column12" class="e-headercelldiv" style="text-align:left"><span class="e-headertext">Id</span></div><span id="headerTitle-grid-column12" style="display:none">Sorted in descending order. Press Alt Down to open filter Menu</span><div class="e-sortfilterdiv e-icons e-descending e-icon-descending"></div><div class="e-filtermenudiv e-icons e-icon-filter " title="Filter Icon" role="button" e-mappinguid="grid-column12"></div></th><th class="e-headercell e-leftalign e-mousepointer e-fltr-icon " data-uid="gridcell-56" role="columnheader" tabindex="-1" aria-colindex="2" data-colindex="1" style="" aria-sort="none" rowspan="1" colspan="1" aria-describedby="headerTitle-grid-column13"><div e-mappinguid="grid-column13" class="e-headercelldiv" style="text-align:left"><span class="e-headertext">Country Name</span></div><span id="headerTitle-grid-column13" style="display:none">Press Enter to sort. Press Alt Down to open filter Menu</span><div class="e-sortfilterdiv e-icons "></div><div class="e-filtermenudiv e-icons e-icon-filter " title="Filter Icon" role="button" e-mappinguid="grid-column13"></div></th><th class="e-headercell e-leftalign e-mousepointer e-fltr-icon " data-uid="gridcell-57" role="columnheader" tabindex="-1" aria-colindex="3" data-colindex="2" style="" aria-sort="none" rowspan="1" colspan="1" aria-describedby="headerTitle-grid-column14"><div e-mappinguid="grid-column14" class="e-headercelldiv" style="text-align:left"><span class="e-headertext">Is Active</span></div><span id="headerTitle-grid-column14" style="display:none">Press Enter to sort. Press Alt Down to open filter Menu</span><div class="e-sortfilterdiv e-icons "></div><div class="e-filtermenudiv e-icons e-icon-filter " title="Filter Icon" role="button" e-mappinguid="grid-column14"></div></th><th class="e-headercell e-leftalign e-mousepointer e-lastcell " data-uid="gridcell-58" role="columnheader" tabindex="0" aria-colindex="4" data-colindex="3" style="" rowspan="1" colspan="1" aria-describedby="headerTitle-grid-column15"><div e-mappinguid="grid-column15" class="e-headercelldiv" style="text-align:left"><span class="e-headertext">Manage Records</span></div><span id="headerTitle-grid-column15" style="display:none">Press Alt Down to open filter Menu</span><div class="e-sortfilterdiv e-icons "></div></th></tr></thead><tbody role="rowgroup" class="e-hide"></tbody></table></div></div><div class="e-gridcontent e-responsive-header" style="height: calc(100% + 0px);"><div class="e-content e-yscroll" style="height: 100%; overflow: auto;"><div class="e-virtualtable" style="transform: translate(0px,0px); position:absolute" styles="min-height:NaNpx"><table class="e-table" cellspacing="0.25px" role="presentation" id="sfgrid2l3bto3fzov_content_table"><colgroup id="sfgrid2l3bto3fzovvirtualcontentcolGroup"><col style="width: 80px"><col style="width: 120px"><col style="width: 120px"><col style="width: 150px"></colgroup><tbody role="rowgroup"><tr class="e-row e-altrow" role="row" style="" aria-selected="false" data-uid="grid-row4" aria-rowindex="1" data-rowindex="0"><td class="e-rowcell e-lastrowcell " tabindex="0" role="gridcell" style="text-align:left" aria-colindex="1" data-colindex="0" aria-selected="false" data-uid="gridcell-59" data-cell="Id">1</td><td class="e-rowcell e-lastrowcell " tabindex="-1" role="gridcell" style="text-align:left" aria-colindex="2" data-colindex="1" aria-selected="false" data-uid="gridcell-60" data-cell="Country Name">USA</td><td class="e-rowcell e-lastrowcell " tabindex="-1" role="gridcell" style="text-align:left" aria-colindex="3" data-colindex="2" aria-selected="false" data-uid="gridcell-61" data-cell="Is Active"><div class="e-checkbox-wrapper e-css e-checkbox-disabled "><span class="e-frame e-icons e-check "></span><span class="e-label "></span></div></td><td class="e-rowcell e-lastrowcell e-templatecell " role="gridcell" tabindex="-1" style="text-align:left" aria-label=" is template cell Column Header Manage Records" data-uid="gridcell-62" aria-colindex="4" data-colindex="3" aria-selected="false" data-cell="Manage Records"><div><button class="btn btn-edit" type="button"><i class="fas fa-edit"></i></button>

</div><textarea class="e-clipboard" style="opacity: 0" tabindex="-1" aria-label="clipboard" aria-hidden="true"></textarea></div></div>

<style>

.e-grid .e-toolbar .e-tbar-btn-text,

.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {

display: none;

}

/* .e-virtualtable {

position: static !important;

transform: none !important;

} */

</style>

JK jose KJ January 24, 2025 09:15 AM UTC

i had many div wrapping it have removed all those wraaping divs but still i am getting this issue, i pasted my html from web inspect, in case that can be helpfull

when i resize thes screen i could see the issue when screen size is between 474px X 832.98px to 768px X832.98px
table width correctly aligns when outside the above dimension

also breaking when loading the page in chrome in android with follwwoing dimension [720x1280]
Image_5723_1737710097492

SK Sanjay Kumar Suresh Syncfusion Team January 27, 2025 07:49 AM UTC

Hi Jose,

Thanks for the update.

We are unable to reproduce the reported issue in the mentioned resolution. To help us investigate this further and validate the issue, we kindly request the following details from your end:

Please share the complete Grid code snippet, including any custom CSS that might be applied.
Provide the code details of the div elements that wrap the Grid, along with the CSS styles applied to them.
Share the video demonstration of the reported issue.
Try to reproduce the reported issue in provided sample or share the issue reproducible sample.

Regards,

Sanjay Kumar Suresh

Need More Help?

Get personalized assistance from our support team.

Contact Support

4 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
JK jose KJ
Platform
Blazor
Control
Grid
Created On
Jan 22, 2025 11:27 AM UTC
Last Activity On
Jan 27, 2025 07:49 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support