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?
Related
I am using this code with react-bootstrap and css:
<div className="justify-content-center d-flex">
<Form>
<Form.Group className="mb-3">
<Form.Control
className="width-400"
placeholder="E-mail"
onChange={this.emailHandler}
/>
{this.state.emailInvalid ? (
<span className="text-danger">
Por favor digite um e-mail válido
</span>
) : null}
</Form.Group>
<div>
{this.state.spinner ? (
<Spinner animation="border" variant="success" />
) : (
<Button
className="mb-3 width-400"
onClick={this.sendRecoveryEmail}
variant="success"
>
Recuperar
</Button>
)}
</div>
</Form>
</div>
CSS:
.width-400 {
width: 400px;
}
So I have an variable(spinner) that is a boolean, when is false a button renders and when the button is pressed the spinner is redered.
When the button is on, the form-control use the right width size and renders with 400px.
But when the spinner is on the form-control get the bootstrap default and resizes to 100%.
I can click on the checkbox and unselect and the right width size works fine, or I can use !important in the css, but I know that this is not a good anwser.
So what am I missing here?
I am attempting to set a Heroicon icon on top of an button background image in Vue 3 and TailwindCSS. I created a circular button component containing a button with a background image and a slot for Heroicon icons:
<!--ButtonComponent-->
<div>
<button type="button" class="relative rounded-full">
<img :src="https://image.shutterstock.com/image-illustration/abstract-vector-blue-color-geometric-260nw-167535434.jpg">
<slot class="absolute"></slot>
</button>
</div>
I then imported that button component into another component, then wrapped that button around an imported Heroicon icon:
<!--ParentComponent-->
<div>
<ButtonComponent>
<VideoCameraIcon />
</ButtonComponent>
</div>
import { VideoCameraIcon } from '#heroicons/vue/outline'
My goal is to configure the slot handling the Heroicon icon to sit on top of the button background image. To handle this, I added a TailwindCSS relative property to the button, and an absolute property to the slot. However, this still doesn't work. How can I go about enabling the slot element to sit on top of image (in order to display the Heroicon icon on the image)?
slot tag doesn't take class attribute in consideration, you should use the :slotted pseudo-class inside a scoped style:
<div>
<ButtonComponent>
<VideoCameraIcon class="btn-icon" />
</ButtonComponent>
</div>
<script >
import { VideoCameraIcon } from '#heroicons/vue/outline'
....
</script>
<style scoped>
:slotted(.btn-icon) {
#apply absolute
}
</style>
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.
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 made a page with a button in a button like the following :
<button mat-button class="library-tile-button">
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>
<img class="library-picture" src="..."></img>
</button>
The buttons use angular material design.
When I click on the parent button I want to navigate to a certain page and when I click on the child button I want to display some additional content. This is working.
When I click on the parent button the default angular material animation for button is triggered. That's fine with me. My problem is that when I click on the child button this is as if the parent button has also been clicked and so the default angular material animation is triggered for both button. I would like to prevent that. What I want is for the animation to be trigerred only for the child button when I click on it.
Any lead how I can acheive that ? Thanks in advance.
As WorksLikeACharm posted, do not nest the buttons. If your problem is just positioning, wrap them into a div and use absolute position on one of them.
Like this:
div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
position:absolute;
top:40px;
left:40px;
}
.edit-library-button img {width:30px;}
<div>
<button mat-button class="library-tile-button">
<img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dVHbFhOgyA0P0JbNu_aS1Tynre891APND36cFHll9qyIQWZ2vEk9kmg" />
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
</button>
</div>
A possible solution would be to remove the nesting of your buttons, thus seperating the click-events.
<button mat-button class="library-tile-button">
<img class="library-picture" src="..."></img>
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>