Hi,
I'm trying to use position-absolute for one element inside a <td> tag and try to position it outside of the table but unsuccessful. Is there a way to do it? I know it's stack order problem but I don't know how to solve it. Like in the photo below, I want to position the cell on top of the table.
the code is kind of like below.
const patientCell = props => {
return <td style={{position:'relative',
overflow: "visible",
}}>
<div style={{position:'absolute', top: '-50px', Zindex: 10000}}>
cell I want to position outside table
</div>
</td>
}
<Grid>
<Column
title="Patient Name"
field="fullName"
columnMenu={ColumnMenu}
cell={patientCell}
/>
</Grid>1 Answer, 1 is accepted
Hello, Roger,
Rendering a custom cell is intended by design to work as a cell inside the grid, and using position absolute could bring some negative side effects. Currently positioning a grid cell outside of the component using CSS is not supported.
The recommended approach, in this case, would be to render the component on the top of the Grid, outside.
I hope this helps.
Regards,
FilipProgress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.