Utilizing Material-UI@next in my React application, I have a component that showcases a list of items using Expansion Panels. Additionally, there is a straightforward <Footer /> component structured like this:
import React, { Component } from "react";
import styled from "styled-components";
import Typography from "material-ui/Typography";
const FooterContainer = styled.div`
text-align: center;
position: absolute;
bottom: 0;
width: 100% !important;
height: 100px !important ;
background: #6cf;
`;
class Footer extends Component {
render() {
return (
<FooterContainer>
<Typography variant="title">Footer Text</Typography>
</FooterContainer>
);
}
}
export default Footer;
This part of the code snippet features the usage of <Footer /> beneath the list of items:
render() {
return this.props.isFetching ? (
<Typography>Loading...</Typography>
) : (
<Container>
<StyledTitle variant="display1" gutterBottom color="secondary">
Listings
</StyledTitle>
<Grid container spacing={24}>
{this.renderListings()}
</Grid>
<Footer />
</Container>
);
}
In this block, the function renderListings() iterates over an array and presents the outcomes within an Expansion Panel:
...
<Grid key={listing._id} item xs={12} sm={12} lg={12}>
<StyledExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<ExpansionPanelColumn>
<Typography>{listing.name}</Typography>
</ExpansionPanelColumn>
</ExpansionPanelSummary>
<Divider />
<ExpansionPanelDetails>
<Typography>Notes: {listing.notes}</Typography>
</ExpansionPanelDetails>
<Divider />
</StyledExpansionPanel>
</Grid>
...
The issue arises when the Expansion Panels are expanded, causing them to overlap with the footer instead of staying at the bottom of the page.