https://i.sstatic.net/Twcnp.png
My col-4 has overflow-y set to auto, but my dropdown gets cut off behind another col when it's open. If I change overflow-y to visible, the dropdown is no longer cut off but the max-height parameter is ignored.
const scrollStyle = {overflowY: 'auto', maxHeight: '750px', minHeight: '175px'};
<Col sm={this.state.pageSettings.pagedCol} style={scrollStyle}>
<Row>
{this.getPagedRows()}
</Row>
</Col>
this.getPagedRows = () => {
const colSize = colMap[this.state.pageSettings.pagedCol];
const rows = this.props.pagedGuests.map((row, index) => {
return(
<Col sm={colSize} key={index}>
<div className="card custom-card">
<div className="card-header bgm-green m-b-20">
<h2 className="card-content title" style={{fontSize: '12px'}}>{row.first_name + ' ' + row.last_name}
<small style={{fontSize: '11px'}}>Paged: {row.page_count}</small>
</h2>
<ul className="actions actions-alt animated flipInX">
<li>
<a className="clickable" onClick={()=>this.archiveGuest(row)}>
<i className="zmdi zmdi-check"></i>
</a>
</li>
<li>
<a className="clickable" onClick={()=>this.pageGuest(row)}>
<i className="zmdi zmdi-notifications-active"></i>
</a>
</li>
<li>
<a onClick={()=>this.toggleInfo(row)} className="clickable">
<i className="zmdi zmdi-info"></i>
</a>
</li>
<li className="dropdown">
<Dropdown id="dropdown-staff-on">
<Dropdown.Toggle noCaret={true} className="btn btn-sm">
<i className="zmdi zmdi-more-vert"></i>
</Dropdown.Toggle>
<Dropdown.Menu
className="dropdown-menu dropdown-menu-right"
>
{departmentOptions(row)}
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
</div>
{row.notes ?
<div className="card-body card-padding note animated fadeIn">
Notes: {row.notes}
</div> : null
}
</div>
</Col>
);
});
return rows;
};
Check out my custom CSS styles below.
.custom-card{
position: relative;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
/*margin-bottom: 30px;*/
border-radius: 2px;
}
.custom-card .card-header {
position: relative;
display: block;
/*padding: 26px 30px;*/
padding: 15px 30px;
border-radius: 2px 2px 0 0;
}
.custom-card .card-header h2 {
margin: 0;
line-height: 100%;
font-size: 16px;
font-weight: 400;
text-align: center;
}
.custom-card .card-header h2 small {
display: block;
margin-top: 8px;
color: #AEAEAE;
line-height: 160%;
}
.custom-card .card-header.ch-alt:not([class*="bgm-"]) {
background-color: #f7f7f7;
}
.custom-card .card-header .actions {
display: none;
z-index: 999
}
.custom-card .card-header .btn-float {
right: 25px;
bottom: -23px;
z-index: 1;
}
.custom-card .card-header[class*="bgm-"] h2 {
color: #fff;
}
.custom-card .card-header[class*="bgm-"] h2 small {
color: rgba(255, 255, 255, 0.7);
}
.custom-card.card-body.card-padding {
padding: 26px 30px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
}
.custom-card .note {
padding: 10px 15px;
display: none;
}
.custom-card .card-header:hover + .note {
display: block;
}
.custom-card .card-header:hover .actions {
width:100%;
height:100%;
background:rgba(0,0,0,1);
position:absolute;
top:0;
left:0;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
color:white;
padding:17px;
font-size:14px;
}