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.
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>
) }
How to make the selected div element to be 100% in the inspect element tool in the picture below. I am using display:flex on .dvPageNotFound class and I want to apply height:100% on the div element inside it. If we put display:flex on parent element then all the child elements gets stretched by default, but here I don't get my child element stretched. I don't know why? I am using 12 column grid system same as bootstrap 4 grid Any help would be appreciated.
HERE IS THE CODE -
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex">
<div class='col-12'>
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
This worked for me. I added height: 100vh and added m-auto classes which we get from the 12 column grid.
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
<div className="m-auto">
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
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
I want to make static navbar which does not follow user on sroll.Is there any way to do it in
react-bootstrap?
<Navbar bg="dark" variant="dark">
<Nav className="mr-auto">
<Button className={'bootstrapProfile'} variant="outline-info">
<Link key={uuidv4()} to={`/profile/${user.id}`}>
My Profile
</Link>{' '}
</Button>
<Button
className={'bootstrapNewTopic'}
variant="outline-info"
onClick={() => {
history.push('/posts');
}}
>
New Topic
</Button>
</Nav>
<Button variant="outline-info" onClick={() => LogOut()}>
Log Out
</Button>
</Navbar>
I tried to give it classname fixed-top but it did not work.
Please help
It seems like you are using react-bootstrap component Navbar. If that is correct instead of giving class in the component you can try.
<Navbar bg="dark" variant="dark" fixed="top">
Make a class say fixed-top-nav. And use position: sticky property to stick it on the top. Add this class to your navbar
.fixed-top-nav {
position: sticky;
top: 0;
}
If you don't want the navbar to follow the user as they scroll, you don't need to add any special props to the Navbar.
Codesandbox demo
I have a react-bootstrap component and the loading animation will not play.
Also, the button wont center. I can use margin-left: 30px; to move it closer to the center but I dont want that as a solution because on bigger screens it goes off center. For the positioning, I am using an imported CSS file.
import Spinner from 'react-bootstrap/Spinner';
import { ButtonToolbar } from "react-bootstrap";
import Button from 'react-bootstrap/Button'
class Button extends React.Component{
......rest of react component........
return(
<div>
<ButtonToolbar >
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
</div>
Does anyone know what I am doing wrong or what I am not doing at all? Thank you for your time.
You can center align your bootstrap button by modifying its container, here the <ButtonToolbar>
Like so:
<ButtonToolbar className="text-center d-block">
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
For the spinner, do you have any React Error?