为什么我的 react-bootstrap Accordion 不能在小型设备上运行？

Question

I have a simple Accordion in one of my components.

function CustomToggle({eventKey}) {
    const [children, setChildren] = useState('Mais filtros 🠗')
    const decoratedOnClick = useAccordionToggle(eventKey, () =>
        setChildren(children === 'Mais filtros 🠗' ? 'Menos filtros 🠕' : 'Mais filtros 🠗')
    )
  
    return (
        <div className="text-center">
            <div className="tag align-center" onClick={decoratedOnClick}>
                {children}
            </div>
        </div>
    )
  }


...


<Accordion>
    <CustomToggle eventKey="0" />
    <Accordion.Collapse eventKey="0">
        <QueryForm
            baseEndpoint={this.props.baseEndpoint}
            tagsInitialValues={this.state.searchParams.tags}
            textInitialValue={this.state.searchParams.description}
            setSearchParams={this.setSearchParams}
        />
    </Accordion.Collapse>
</Accordion>

It works perfectly on larger breakpoints, but, for smaller devices, the QueryForm shows in the opposite direction and stays on top of the page's content.

Check the sandbox: https://codesandbox.io/s/0y8cm

(click on 'Mais filtros' to trigger the accordion and see the problematic breakpoint when the navbar toggle appears)

What am I doing wrong?

Answer 1

The default of Accordion react component it doesn't use absolute position for define the position of the accordion content. I'm not sure how you customize position: absolute. Then the first way if you consider don't need to use the position: absolute. You can remove it at:

  collapsing {
    position: absolute !important;
    z-index: 3;
    width: 100%;
    top: 75px;
  }

  .collapse.show {
    display: block;
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 75px;
  }

The second way, if you intend to do something with position: absolute in mobile, you should pick a container of the form and add position: relative then your form will render base on the position of that container.

<div style={{ position: "relative" }}>
    <Accordion>
    <CustomToggle eventKey="0" />
    <Accordion.Collapse eventKey="0">
        <QueryForm
        baseEndpoint={this.props.baseEndpoint}
        tagsInitialValues={this.state.searchParams.tags}
        textInitialValue={this.state.searchParams.description}
        setSearchParams={this.setSearchParams}
        />
    </Accordion.Collapse>
    </Accordion>
</div>

Answer 2

There is some issue in your Navbar.css. Not sure why you use position to be absolute. I commented out those, and it works now.

  .collapsing {
    /* position: absolute !important; */
    /* z-index: 3; */
    width: 100%;
    /* top: 75px; */
  }

  .collapse.show {
    display: block;
    /* position: absolute; */
    /* z-index: 3; */
    width: 100%;
    /* top: 75px; */
  }

https://codesandbox.io/s/relaxed-dust-2yimw?file=/src/components/common/Navbar.css:736-984

Answer 3

Do you run the Accordian on small device?

here is my code. I hope it's will help you.

import React, {useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import PropTypes from 'prop-types';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(1),
    fontWeight: theme.typography.fontWeightRegular,
  },
}));

const Accordian = ({ 
        title,  
        data, 
        onclick, 
        shownName
    }) =>{
            const classes = useStyles();
            let content;

            const [subtitle, setSubtitle] = useState("");
            const [expand, setExpand] = useState(true);

            const liClick = (e) => {
                setSubtitle(e.target.getAttribute('data'));
                onclick(e);
                setExpand(!expand);
            }
            const clickExpand = (e) =>{
                setExpand(!expand);
            }
                    
            content = data.map((value, key)=>{
                return (
                    <li 
                        className="list-group-item" 
                        key={data[key][shownName]+"_"+key} 
                        name={data[key][shownName]} 
                        data={data[key][shownName]} 
                        onClick={liClick}
                    >
                        {data[key].mark?(<img src={data[key].mark} align="left" className="mark_sign" alt="mark"/>):''}
                            {data[key][shownName]}
                        <i className="fa fa-angle-right"  align="right"/>
                    </li>
                );
            });

            return (
                <div className={classes.root}>
                    <div className="container">
                        <Accordion 
                            defaultExpanded={true} 
                            expanded={expand} 
                            style={{ 
                                borderBottom:'1px', 
                                borderBottomColor:'white', 
                                borderBottomStyle:'solid'
                            }}>
                            <AccordionSummary
                                expandIcon={<ExpandMoreIcon />}
                                aria-controls="panel1a-content"
                                id="panel1a-header"
                            >
                                <Typography 
                                    className={classes.heading} 
                                    style={{fontSize:'14px', textAlign:'left'}}
                                    onClick={clickExpand}
                                >
                                    <span className="Name" style={{ float:'left'}}>{title}{' '}</span>
                                    <span style={{fontSize:'18px', color:'#007bff',width:'100%',top:'10px',left:'0', textAlign:'center', position:'absolute'}}>{' '}{subtitle}</span>
                                </Typography>
                            </AccordionSummary>

                            <AccordionDetails>
                                <Typography>
                                    <span 
                                        className="list-group list-group-flush" 
                                        align="center"
                                    >
                                        {content}
                                    </span>
                                </Typography>
                            </AccordionDetails>
                        </Accordion>
                    </div>
                </div>
            );
}

Accordian.propTypes = {
  shownName: PropTypes.string.isRequired,
    data: PropTypes.array.isRequired,
    onclick: PropTypes.func.isRequired
};

export default Accordian;

Yesterday I fix the this problem. So I share this code. Please check agian.