Reputation: 9
I am working on a project that uses KendoReact for the front end written on Typescript, Bootstrap 5 is used for styling alongside custom css files. I have an issue with rendering the Grid. The Grid is located within modal that uses Bootstrap 5 for styling it. The issue I face is that when I resize the browser screen to small size the Grid is gone and not visible anymore. As far as I know the grid would be displayed as long as the parent has enough height, so it takes me to the conclusion that the issue is with the Bootstrap, but still not entirely sure. Has anyone face such issue and could help me please ?
This is the structure of the component:
`<button data-bs-toggle="modal" data-bs-target="#modalId"></button>
<div className="modal fade" data-bs-backdrop="static" id="modalId" aria-hidden="true">
<div className="modal-dialog modal-xl modal-fullscreen">
<div className="modal-content ">
<div className="row modal-header">
<div className="modal-body text-dark">
<div className="container-fluid">
<div className="tab-content">
<div id="gridId" className="tab-pane active p-3 border">
<Grid
filterable={true}
pageable={true}
sortable={true}
groupable={true}
expandField="expanded"
onExpandChange=
{expandChange}
data={gridResult}
{...dataState}
size={"small"}
style={{ height:
window.innerHeight*0.75}}
>
<GridColumn></GridColumn>`
I resized the browser window to small size and expected still to be able to see the grid, but currently the grid is not visible when the browser screen is small.
Upvotes: 0
Views: 20