When overflowY is set to auto, the dropdown may be cut off if there are

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;
}

Answer №1

.CustomCards .window-style
        {
            position:sticky !important;    
            width:312px; /* adjusted size */
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for securely storing visitor-entered form data on our computer from our webpage

Is there a way to store the information filled out by visitors on our website? <ul class="form"> <li class="short"> <label>First Name<span class="required"></span></ ...

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am st ...

CSS: The enigma of :nth-child - what eludes my understanding?

I have 2 divs which are similar to 2 td's in a table. My goal is to have 2 red divs, followed by 2 blue divs and so on. However, my current code doesn't seem to be working. Can someone point out what I am missing: <style> .irow :nth-child( ...

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

What is the best way to extract the content within a nested <p> element from an external HTML document using the HTML Agility Pack?

I'm currently working on retrieving text from an external website that is nested within a paragraph tag. The enclosing div element has been assigned a class value. Take a look at the HTML snippet: <div class="discription"><p>this is the ...

How to switch to a different tab within a parent component using React Material Tabs

Within my FeedSwitcher component, there are two tabs: one for the general feed and another for posts belonging to the current user. Initially, the value in the FeedSwitcher component is set to 0, allowing the current user to view all the feed. const FeedSw ...

Tips for incorporating images using props in ReactJs?

I'm having trouble passing an image path as a prop in React. I've tried using: require("./house.jpg"); However, the image appears broken. The image path is located under 'src'. How can I correctly pass the image path to the p ...

Override the default Bootstrap 5 styling for nav-links

I recently encountered a problem while trying to customize the appearance of the nav-link elements in my Bootstrap 5 navbar. I initially thought I could simply override the existing styles by targeting the class in my CSS. However, my attempts were unsucce ...

Secondary navigation bar remains hidden

I am facing an issue with the sub menu bar on this website. I am using the Constellation theme for WordPress and have attempted to adjust margins in order to make it visible, but so far I have been unsuccessful. The sub menu is meant to be responsive, yet ...

Using a specialized component to trigger the opening of a Material UI dialog

I have a requirement where I need to pass a custom component to an MUI Dialog so that the Dialog can open itself and render its children. const CustomDialog = ({children, someCustomComponent}) => { const handleClickOpen = () => { setOpen(true); } ...

center text vertically in HTML list

Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure: <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="index.html"><i ...

React router updates the URL without affecting the actual display

I am facing an issue in my React project where the URL changes when clicking a link, but the view does not update. I have a separate route and links file, and I can't seem to figure out the problem. Here is my index.js: import React from 'react ...

The spacing between the rows of the ListItem is excessively tall

Currently, I am working with Material UI to design a list. It seems that the height of my list elements needs to be reduced. I have attempted using <List dense={dense}>, but it appears to still be too spaced out. Is this issue related to padding or s ...

PHP - Unable to successfully upload the file

Recently, I created code in php for uploading an image/file using move_upload_file() as shown below: if (isset($_POST["title"]) && isset($_POST["content"]) && isset($_POST["category"])) { //if (!isset($_POST[])) $title = ...

Modifying the sorting icon appearance for table header columns in React Material-Table: A step-by-step guide

Is it possible to customize the sorting icons on React Material-Table table header columns? For example, I would like the ascending sorting icon to be ArrowDownward and the descending sorting icon to be ArrowUpward. I have attempted to set the SortArrow ic ...

Error: Invariant Violation occurred with code 29 while using React Apollo and GraphQL

I encountered an error that says "Invariant Violation: 29." Could someone explain what this error means and if I missed something in my code that triggered it? The error occurred when I was trying to import the LocationSearch component into my index.js. im ...

Unable to locate an image when using .find() in ReactJs

When trying to display the selected item image, only alt attributes are being displayed. In my App.js file: <Route path="/Item/:id" element={<Item />} /> This is how I styled my Link in Trending.js using MUI: <StyledLink to={& ...

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

On a website, I am integrating an external 2-factor authentication solution called Duo Web using their PHP and Javascript. It works smoothly on all browsers except for IE8. When the user passes the initial login screen, the 2FA login page loads, but the if ...

The div is empty when trying to display Google Maps

When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from S ...

Attempting to modify the background color of an iFrame in Internet Explorer

I am experiencing an issue with my webpage where the iFrame is displaying with a white background in IE, while it shows up with a blue background in Firefox and Chrome. I have attempted various solutions to make the background of the iframe blue or transpa ...