I have a demo here
Its a super simple app with four buttons and a text area.
When you click a buttons it loads different text
The text is different lengths so the grey container gets taller and shorter
Is it possible to animate the grey box when the text gets taller and shorter
const [text, setText] = useState(textArr[3])
return (
<div>
<div className="nav">
<button onClick={() => setText(textArr[0])}>
One
</button>
<button onClick={() => setText(textArr[1])}>
Two
</button>
<button onClick={() => setText(textArr[2])}>
Three
</button>
<button onClick={() => setText(textArr[3])}>
Four
</button>
</div>
<div className="text">
{text}
</div>
</div>
);
I put a parent div with overflow: hidden applied to it then I used a useEffect to calculate the height of the text div when the text changes and then I set the height of the parent div to this height.
With transition on the parent div, it animates.
See demo here : https://stackblitz.com/edit/react-t7ctuf?file=src%2FApp.js
Related
I am very new to react and animate.css. I am hoping the user can click on the panel and have a new link open, but for now it only works when the underlying image is clicked before the slideInUp animation (in this case it is the green panel with the text). Once the animation happens, it no longer works. The image is what it looks like after the animation.[the animation is the green background + text sliding down onto the image](https://i.stack.imgur.com/HlLuV.png
export const Card = ({ title, description, imgUrl, link}) => { return (
<Col size={12} sm={6} md={4}>
<div className="proj-imgbx">
<a href={link} target="_blank">
<img src={imgUrl} href={link}/>
</a>
<div className="proj-txtx">
<h4>{title}</h4>
<span>{description}</span>
</div>
</div>
</Col>
) }
I have implemented two maps in the following way:
<Card className={"h-23rem"} style={props.backgroundImage ? {backgroundImage: `url(${props.backgroundImage})`} : {}}>
<div className={`flex flex-row justify-content-center align-items-center`}>
{props.icon}
<h2>{props.text}</h2>
</div>
<div className={"flex justify-content-center align-items-center"}>
<Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
</div>
</Card>
As you can see in the above code, I set the class "h-23rem" for the card and the card is successfully adjusted in height:
However, the card-body and the card-content do not use the full height, but remain at the original height.
How can I make the card content or the card body use the whole available height?
I am trying a simple popover and have added a close button, code as follows:
import React from 'react';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Popover from 'react-bootstrap/Popover';
const popover = (
<Popover className="mt-2" id="popover-basic">
<Popover.Title as="h3">
Popover right
<button type="button" class="close" style={{ width: '20', height: '20'}} aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</Popover.Title>
<Popover.Content>
And here's some <strong>amazing</strong> content. It's very engaging.
right?
</Popover.Content>
</Popover>
);
const PopoverTest = () => {
return (
<div className="text-center">
{/* Wrap in the trigger to get the target */}
<OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
<Button className="mt-3 text-center">Click me to see</Button>
</OverlayTrigger>
</div>
);
};
export default PopoverTest;
However the button is not centered vertically:
How can I fix this?
Remove the mt-3 className in the Button component. It adds margin on the top by 1rem. If you still want to align the button at the center of its container or the page, consider styling the div that wraps the OverlayTrigger with flex.
Anyone, please help, I am trying to display the full image of a small image which are in the gallery.
When I scale the display Modal is auto-resize and the image is not able to resize according to Modal even I use the image inside the Modal. Image overlapping while scaling.
Even I remove width also not workin
function Modalcenter(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Decoration
</Modal.Title>
</Modal.Header>
<Modal.Body>
<img src={G1s} alt="G1s" width="1080" />
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
function Example() {
const [modalShow, setModalShow] = React.useState(false);
return (
<>
<img src={G1} alt="G1" width="200" onClick={() => setModalShow(true)} />
<Modalcenter
show={modalShow}
onHide={() => setModalShow(false)}
/>
</>
);
}
Apply this class to the image
<img src="..." className="img-fluid" >
which is the default class, provided by Bootstrap for making it responsive.
I am using this code to make toolbar responsive
<md-toolbar>
<div fxLayout fxShow="false" fxShow.gt-xs>
<button md-raised-button><md-icon>add</md-icon>New Role</button>
<span style=" flex-grow: 0.1"></span>
<button md-raised-button><md-icon>mode_edit</md-icon></button>
<button md-raised-button><md-icon>delete</md-icon></button>
<span style=" flex-grow: 2"></span>
<button md-raised-button><md-icon>perm_identity</md-icon>Add User</button>
<span style=" flex-grow: 0.1"></span>
<button md-raised-button><md-icon>delete</md-icon></button>
</div>
<!--button that will be visible when screen is small-->
<span style="flex: 1 1 auto;"></span>
<button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-xs>
<md-icon>menu</md-icon>
</button>
</md-toolbar>
Now when the screen size is extra small all other button gets hidden and a menu button is shown. The problem I am facing is that when the screen is of full size the flex-grow properties are not working in the toolbar. I have given the flex-grow to 0.1,2 in span element, but on UI there is no gap between button.
What could be the possible issue?
And is there any other better way to make toolbar responsive?
Updated
I have tried fxFlex directive still no effect.
As all the buttons are under div, now if I remove that div container, it works. But as I have to hide all the buttons based on screen size so div is necessary to contain all the buttons.