I'm currently facing a challenge with a table on my webpage that displays data but isn't scrolling all the way to the bottom. This code was implemented by previous developers, and as someone who isn't well-versed in CSS, I'm struggling to pinpoint the issue causing this scroll restriction. Any insights or guidance on how to resolve this would be greatly appreciated. Thank you.
Removing the first div allows for smooth scrolling, but since there are three more tables on the same page which appear based on button clicks, I need to retain that div structure.
For context: The "RenderBody()" function returns an array of elements. There are three additional tables similar to the one above, and they're encountering the same scrolling problem. The ".tableData" classes have varying widths.
myFile.js
<div className="JobTabContentContainer" id="PendingContainer">
<table className="TableHeaderContainer">
<thead>
<tr>
<th className="tableData10">Data1</th>
<th className="tableData10">Data2</th>
<th className="tableData10">Data3</th>
<th className="tableData10">Data4</th>
<th className="tableData12">Data5</th>
<th className="tableData8">Data6</th>
<th className="tableData10">Data7</th>
<th className="tableData10">Data8</th>
<th className="tableData10">Data9</th>
<th className="tableData10">Data10</th>
</tr>
</thead>
</table>
<div className="TableBodyScrollingDiv">
<table className="TableBodyContainer">
<tbody>
{this.RenderBody("Pending",this.props.jobData)}
</tbody>
</table>
</div>
</div>
myFile.css
.JobTabContentContainer {
flex: 1;
display: none;
flex-direction: column;
}
.ViewedContentContainer {
height: 95%;
display: flex;
flex-direction: column;
}
.ViewedContentContainer .TopBarContainer,
.ViewedContentContainer .BottomBarContainer,
.ViewedContentContainer .TitleBarContainer {
min-height: fit-content;
min-width: 916px;
padding-top: 5px;
padding-bottom: 5px;
position: sticky;
left: 0;
right: 0;
}
.ViewedContentContainer .TitleBarContainer {
text-align:center;
}
.ViewedContentContainer .TitleBarContainer h1 {
margin: 0;
padding: 0;
}
.ViewedContentContainer .TableHeaderContainer {
border: 2px solid var(--Blue);
background-color: var(--Blue);
color: var(--LighterBlue);
text-align: center;
min-width: 916px;
}
.ViewedContentContainer .TableBodyScrollingDiv {
text-align: center;
border: 2px solid var(--Blue);
background-color: white;
overflow-y: auto;
overflow-x: hidden;
min-width: 916px;
max-height: 90%
}
.ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer {
width: 100%;
font-size: 10px;
}
.ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow {
display: table-row;
}
.ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(odd) {
background-color: var(--LightBlue);
color: var(--DarkBlue);
}
.ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:nth-child(even) {
background-color: var(--LighterBlue);
color: var(--DarkBlue);
}
.ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow:hover {
background-color: var(--AccentBlue);
color: var(--DarkBlue);
}
.ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow td{
word-wrap: break-word;
}
.ViewedContentContainer .TableBodyScrollingDiv .TableBodyContainer .TableBodyRow .JobReviewStatusBtn {
border-radius: 5px;
}
The recent occurrence of this scrolling issue is perplexing, considering it has not been problematic before. I am unsure if it's due to an overflow complication or potentially something else that may be straightforward.