Utilizing the react-bootstrap accordion has been quite helpful in my project. However, one of the items within it sometimes contains a lengthy list. To tackle this issue, I included overflowY: auto in the style to introduce a scroll bar when needed. Although the scroll bar does appear, it seems that it is not clickable, and can only be scrolled using the mouse wheel. Any suggestions on why this might be happening and what steps I should take to resolve it?
<div style={{ paddingTop: "1.7rem" }}>
<table className="columnTable">
<tbody>
<tr>
{/* Other rows not shown */}
<td className="header">Context Information</td>
</tr>
<tr>
<td>
<Accordion defaultActiveKey={open.current} flush alwaysOpen>
{someList.filter(a => a.shouldbeIncluded == 'true').map((asset, i) => (
<Accordion.Item style={{ cursor: pointer, overflow: 'auto' }} eventKey={i.toString()} key={itemUri} onClick={e => HandleAccordionEvent(e, nameFromElsewhere)}>
<Accordion.Header>{myPropertyName}</Accordion.Header>
<Accordion.Body className="bodyText ellipses" style={{ overflowY: 'auto', maxWidth: 200, maxHeight: 200, textOverflow: 'ellipsis', padding: 10 }}>
{myItemList.filter(a => a.filter == "criteria").map((a, j) => (
<><a href="randomUrl">{a.someRandomText}</a><br/></>
))}
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
</td>
</tr>
{/* Other rows */}
</tbody>
</table>
The custom CSS for my component looks like this, but I fail to see how it could impact the scroll bar functionality:
.accordion-button.collapsed {
background-color: rgb(53, 132, 181) !important;
color: white;
}
.accordion-button {
font-size: medium;
padding: 10px;
background-color: rgb(0, 165, 203) !important;
color: white !important;
}
.header {
background-color: rgb(33, 90, 161);
color: white;
padding: 10px;
}
.bodyText {
font-size: 15px;
text-align: left;
}
.ellipses {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
}
.columnTable {
border-width: 1px;
border-color: lightgray;
border-style: solid;
position: 'absolute';
top: 0;
width: 200px;
display: 'inline-block';
padding-top: "1.7rem";
}