Reputation: 2127
I am trying to change the direction of the way the accordion element in react-bootstrap moves. Currently it moves down. Is there a simple way to make it open in the up direction?
Below is an example of one of my components. I want to be able to open it in the upwards direction as opposed to downward, the reason being that I have placed it on the bottom of the screen and so when I open it in default settings it goes down as opposed to up:
import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const InfoBox = ( props ) => {
const Styles = {
width: "100%",
marginTop: "147%"
}
return (
<div style={Styles}>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Link Info
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<div>{`Link Address: ${props.sa}`}</div>
<div>{`community board: ${props.cb}`}</div>
<div>{`lat: ${props.lat}`}</div>
<div>{`lon: ${props.lon}`}</div>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
)
};
export default InfoBox;
Upvotes: 3
Views: 8313
Reputation: 31
I didn't need any CSS changes or anything. What I did was simply moving the <Accordion.Collapse>
above the <Accordion.Toggle>
like so;
<Accordion>
<Card>
<Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<div>{`Link Address: ${props.sa}`}</div>
<div>{`community board: ${props.cb}`}</div>
<div>{`lat: ${props.lat}`}</div>
<div>{`lon: ${props.lon}`}</div>
</Card.Body>
</Accordion.Collapse>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Link Info
</Accordion.Toggle>
</Card.Header>
</Card>
</Accordion>
Let me know if it worked for you.
Upvotes: 2
Reputation: 1147
Moving the accordion upward can be achieved by simple CSS changes.
We can reverse the flex-direction of the div with classname .card
.
By default the flex-direction
is column
. We can override it and make it column-reverse
.
.card
default styling provided by bootstrap
.card {
display: flex;
flex-direction: column;
}
Change the flex direction by adding css styling in your projects with a higher precedence. Like this -
.my-footer .card {
flex-direction: column-reverse;
}
Here is the codesandbox solution for the same - https://codesandbox.io/s/distracted-fog-nxb6n?file=/src/styles.css
More explanation - When react-bootstrap renders the accordion, it adds this DOM structure -
<div class="accordion">
<div class="card">
<div class="card-header">
...
</div>
<div class="collapse" style="">
<div class="card-body">
...
</div>
</div>
</div>
</div>
By giving flex-direction
as column-reverse
we are interchanging the flow of .card-header
and .collapse
elements.
Let me know if this helps.
Upvotes: 8
Reputation: 15837
I think it is not possible: a Collapse
doesn't move, a Collapse
just expands or (indeed) collapses.
The perceived effect when a Collapse
expands is that what is beyond the Collapse
itself moves down, but actually the page enlarges and keeps the vertical scroll at same position.
Since your Collapse
is at the bottom of the page, a possible solution is to also scroll down the page simultaneously to the expansion of the Collapse
.
You should achieve it quite easily playing with window.scrollY
and window.scrollTo()
.
Hope this helps.
Upvotes: -1