Hi Prince,
In your Mendix project, navigate to the theme folder, typically located under /theme/web
and open custom.scss
file.
Add SCSS code to freeze the desired columns. Apply the following SCSS properties to make them fixed while scrolling horizontally.
.theclassname {
position: sticky;
left: 0;
background-color: #fff; /* adjust to match your styling */
z-index: 1;
}
Replace .theclassname
with the appropriate class or selector for the employee ID and employee name columns.
Hope it helps!!!
Hi Prince ,
You can write the custom css class in main.css file which you can find in folder /Mendix/ProjectFolder/theme\web .
You can add the CSS class there and same you can use in Appearance → Custom CSS section.
I have applied css in table.css
.table .th:nth-child(2) ,
.table .td:nth-child(2) {
left: 0;
position: sticky;
z-index: 999;
}
.table .th:nth-child(3) ,
.table .td:nth-child(3) {
left: 0;
position: sticky;
z-index: 999;
}
I am getting one issue here. Employee ID and Employee code is getting overlapped. i.e. Employee Code is getting hiddedn under Employee code Can you correct me where i have made the mistake.
.table .th:nth-child(2),
.table .td:nth-child(2) {
left: 0;
position: sticky;
z-index: 999;
}
.table .th:nth-child(3),
.table .td:nth-child(3) {
left: 210px; // adjust as per your project
position: sticky;
z-index: 998;
}
.table .td:nth-child(n+4) {
left: 200px; // adjust as per your project
position: sticky;
z-index: 997;
}
.table .td:nth-child(3) ,
.table .td:nth-child(2) {
background-color: white;
}
This has worked for me.