ReactJS + Redux - Material-UI: How to make <Toolbar/> floatable? - javascript

Using: http://www.material-ui.com/#/components/toolbar , how can I make floatable when scrolling down?
I was able to do it with with the following:
textAlign:'center', position: 'fixed', top: 0
but when I do it with the <Toolbar/>, it resizes weirdly.

Have you tried setting the width to 100%? This worked for me:
<Toolbar
style={{
position: 'fixed',
top: 0,
width: '100%'
}}>
// Content
</Toolbar>
Or:
<Toolbar
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
}}>
// Content
</Toolbar>

Related

Align button to the bottom of the page using MUI v5 in React

I'm trying to position the button exactly at the center bottom of the page irrespective of the content height in that page.
Excerpt from my code
const useStyles = makeStyles({
button: {
bottom: 0,
right: 0,
position: "absolute"
}
});
export default function Home() {
const classes = useStyles();
return (
<div>
<Box>
<Box>
<Paper elevation={2} sx={{ width: "100%", height: "50vh" }}>
Some data
</Paper>
</Box>
<Box textAlign="center">
<Button
className={classes.button}
variant="contained"
sx={{ width: "200px" }}
>
Submit
</Button>
</Box>
</Box>
</div>
);
}
I created a working example using CodeSandbox. Could anyone please help?
This is more css related (see other post) but you as you manually set the width of the Button you can position it 50% from the left and then subtracting half of its width from its left margin:
bottom: 0,
left: "50%",
marginLeft: -100,
position: "absolute"
see exemple

CenterText in doughnut in react

centerText: {
display: true,
text: `${income}`,
fontSize : 10
}
I'm not able to see center text using about code in option of doughnut chart.
Anyone know why?
Thank you in advance
It was sometime ago when I was researching about adding centering text in react-chartjs-2's Doughnut, and I briefly remembered the easiest way to achieve center text in Doughnut is actually using relative and absolute positioning to add a layer to the doughnut.
<div style={{ width: '200px', height: '200px', position: 'relative'}}>
<Doughnut data={data} options={options} width={200} height={200}/>
<div style={{ position: 'absolute', width: '100%', top: '50%', left: 0, textAlign: 'center', marginTop: '-28px', lineHeight: '20px'}}>
<span>Text here</span> //may use text-align here to center text
</div>
</div>

How to add a Badge for an Icon in Ant Design?

I'm using the Icon and Badge from Ant Design. I want to add the Badge for the Icon:
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</VscBell>
I have import 'antd/dist/antd.css'; imported and the Badge works without the Icon. The Icon is from reacticons and it is displayed properly. I want to add the Badge to the top right of the Icon. But it does not show at all when included in the Icon.
Put them both in a View Tag (if you are react-native) or div
and then take this styles to the badge:
position: absolute;
right: 0px;
top: 0px;
Something like this:
<div>
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
</VscBell>
<Badge count={5} style={{ position: 'absolute', right: 0, top: 0 }}>
<a href="#" className="head-example" />
</Badge>
</div>

How to Crop an Image's Height Without Changing Size and Ratio (React/CSS)

I'm attempting to crop this image in CSS so that the image fills the entire container and stays the same ratio as the original file, without changing the image size any larger than what it needs to fit the container. Just like what photoshop does with the crop tool:
In this example, the images size doesnt change in either direction, and fills the container its in, but the image is cropped on its Y axis from the bottom to the top:
Heres a video example: https://imgur.com/za9IIIW
Here's a simple working code example: https://codesandbox.io/s/epic-frog-vkvxp?file=/src/App.js:0-1402
import React, { useEffect, useState, useRef } from "react";
import "./styles.css";
import img from "./img.jpg";
const appContainerStyle = {
position: "relative",
height: "100vh",
width: "100vw",
backgroundColor: "rgb(70,70,70)"
};
const btnContainerStyle = {
position: "absolute",
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
};
export default function App() {
const [height, setHeight] = useState(100);
const imageStyle = {
position: "absolute",
height: `${height}%`,
width: "100%",
background: `url(${img})`,
backgroundSize: "cover",
backgroundPosition: "top",
backgroundRepeat: "no-repeat"
};
return (
<div style={appContainerStyle}>
<div style={imageStyle}></div>
<div style={btnContainerStyle}>
<button
style={{ height: "50px", width: "100px" }}
onClick={() => {
height > 0 && setHeight(height - 10);
}}
>
Smaller
</button>
<button
style={{ height: "50px", width: "100px" }}
onClick={() => {
height < 100 && setHeight(height + 10);
}}
>
Bigger
</button>
</div>
</div>
);
}
//image is changing size when the height is changed,
//I would like for it to stay the same size, but crop when the height is changed
My problem is that it crops the image sometimes fine, but it also sometimes changes the image size.
The image shouldn't scale in its container, it should only be cropped in the window.
Here's a flawed approach: stillscales
As you can see, the image is cropped until it reaches a point where the image is then being scaled in its container.
Any help would be appreciated!
create an image container with overflow of hidden so this way when you move image it won't show the outside of box.
then you have to set the image position to relative. this helps to move the image from its position without breaking the design.
after that you can give the image left, right, top and bottom positions to set the image position and the overflow will be hidden.
the html:
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
</div>
the css:
.image-container {
overflow: hidden;
}
.image-container img {
position: relative;
top: -100px;
}
this is how you crop the image if you need more help ask in the comment for react code
Change the backgroundSize: "cover" to backgroundSize: "150%".
const imageStyle = {
position: "absolute",
height: `${height}%`,
width: "100%",
background: `url(${img})`,
backgroundSize: "150%",
backgroundPosition: "top",
backgroundRepeat: "no-repeat",
};
Codesandbox: https://codesandbox.io/s/admiring-buck-89pv4

Mapbox canvas rendering on half of the screen

I'm trying to use MapBox with React.js. This is my code:
import ReactMapboxGl, {Layer, Feature} from "react-mapbox-gl";
render() {
const Map = ReactMapboxGl({
accessToken: "..."
});
return (
<div className="App">
<Map style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: "100vh",
width: "100vw",
}}>
<Layer
style={{
position: 'absolute',
left: 0,
top: 0,
}}
type="symbol"
id="marker"
layout={{"icon-image": "marker-15"}}>
<Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
</Layer>
</Map>
{/*<button onClick={this.requestLocation}>Refresh position</button>*/}
</div>
);
}
The problem is, this is the result:
It's always precisely 50% of the width. I'm using this module: https://github.com/alex3165/react-mapbox-gl
What did I mess up?
Sorry for the late answer, this is caused by come css conflcts.
Try to comment the text-align center for .App
.App {
/* text-align: center; */
}
This should work!

Categories

Resources