I am learning React and I came across a youtube video that teaches how to use spinners.
https://www.youtube.com/watch?v=T3L4zQnLrVA
I've written the code inside of codesandbox.io here:
https://codesandbox.io/s/late-thunder-sise4?fontsize=14&hidenavigation=1&theme=dark
Now if you click on the "Fake Fetch" button, you'll see the word "Text" in black to the left of the spinner and I was wondering how I could get the word above the spinner.
Thanks for the help!
Just add the following style to your h3 with Text
<h3 style={{ position: 'absolute', top: '250px' }}>Text</h3>
https://codesandbox.io/s/nifty-borg-k3d2u
FWIW - in the future try to use StackOverflow's code snippets, since links to codesandbox aren't guaranteed to exist in the future in case someone else can benefit from your question.
You can use flex to achieve this. In your styled styles, use:
display: "flex",
flexDirection: "column"
So your entire style would be:
const styled = props.overlay
? {
background: "rgba(0, 0, 0, 0.5)",
height: "100vh",
width: "100vw",
position: "fixed",
display: "flex",
flexDirection: "column"
}
: null;
Keep in mind the style above is only applied when the overlay is selected. Otherwise you don't apply any special styles to the Spinner (because they styles are null).
If you want the Text and Spinner stacked for both overlay and non-overlay, use:
const styled = props.overlay
? {
background: "rgba(0, 0, 0, 0.5)",
height: "100vh",
width: "100vw",
position: "fixed",
display: "flex",
flexDirection: "column"
}
: {
display: "flex",
flexDirection: "column"
};
Here's the full working example - https://codesandbox.io/s/proud-frost-3zjob
This definately works. Add some flex properties such as:
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
If you use the styles as such, it works perfectly.
import React from "react";
import SpinnerIcon from "./SpinnerIcon";
import "./Spinner.css";
const Spinner = props => {
return (
<div className="Spinner" style={{
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<h3 style={{ margin: 0 }}>Text</h3>
<SpinnerIcon />
</div>
);
};
export default Spinner;
Check this fiddle
Related
I have an image and i need to make it cover all of the background.
The problem is, that for some reason the image isn't covering all of the background,
and it always stops somwhere where i put another object, and never goes farther then this.
Im using material ui and my code looks like this
import { Image } from "../images";
import { TextField } from "#mui/material";
const useStyles = makeStyles({
Background: {
display: "flex",
alignItems: "center",
justifyContent: "center",
justifyItems: "center",
flexDirection: "row-reverse",
width: "100%",
height: "100%",
backgroundImage: `url(${Image})`,
backgroundSize: "cover",
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 10%',
}
})
function Login() {
const classes = useStyles();
return (
<div className={classes.Background}>
<TextField></TextField>
</div>
);
}
This is the result i get:
Try this style
Background: {
display: "flex",
alignItems: "center",
justifyContent: "center",
justifyItems: "center",
flexDirection: "row-reverse",
width: "100%",
height: "100vh",
backgroundImage: `url(${asd})`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "50% 10%"
}
I need to build horizontal progress bar with circle at the end in react js, as shown in picture. I am able to build progress bar with custom "%", now I want to add circle at the end with some text inside.
code for progress bar with custom "%":
codesandbox
Change progress bar component to:
<div style={containerStyles}>
<div style={fillerStyles}>
<div style={circleStyles}>{circleText}</div>
</div>
</div>
And add this styles to the component:
const circleStyles = {
display: "flex",
position: "absolute",
right: "0",
width: "50px",
height: "50px",
background: "blue",
top: "-60%",
borderRadius: "50px",
justifyContent: "center",
alignItems: "center",
color: "white"
};
And here's the App.js:
export default function App() {
return (
<div className="App">
<ProgressBar
bgcolor={item.bgcolor}
completed={item.completed}
circleText={"100%"}
/>
</div>
);
}
add a span under container div and put this style to it
<div style={containerStyles}>
<div style={fillerStyles}></div>
<span style={circleStyle}>{text}</span>
</div>
style
const circleStyle = {
height: 40,
width: 40,
position: "absolute",
right: 0,
backgroundColor: bgcolor,
borderRadius: "50%",
top: -10,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white"
};
and then put this to containerStyle
position: "relative",
I'm working on a react. The code below is an example. ArrayExample is mapped and returned to the div component. Whenever I click the mapped div component, I want to change the value of the top of div (position: 'absolute') and place it on the right side according to the mapped div topBorder. Is there a way? I want to move it smoothly like an animation.
import React from "react";
const sample = () => {
const arrayExample = ["AAAA", "BBBB", "CCCC"];
return (
<div
style={{
display: "flex",
flexDirection: "column",
width: "100%",
height: "500px",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f3f3f3",
}}
>
{arrayExample.map((v, i) => {
return (
<div
style={{
width: "50%",
padding: 50,
border: "1px solid black",
marginTop: 15,
}}
onClick={() => {
console.log("Event!")
}}
>
{v}
</div>
);
})}
<div style={{position: 'absolute', top: 70, right: '22%', backgroundColor: "#4285F4", width: 50, height: 150, borderRadius: 5}}>
moving screen(I want to Change top value)
</div>
</div>
);
};
export default sample;
On click of the item div, you need to figure out the distance of that div from the top, and then change the top css property of your right div according to that. To find this distance you can use offsetTop property. For animation you can use transition property. Here is the code:
import React, { useRef } from "react";
const Sample = () => {
const arrayExample = ["AAAA", "BBBB", "CCCC"];
const rightDiv = useRef();
const itemClickHandler = (i) => {
const newTopHeight = document.getElementById("container").children[i].offsetTop;
rightDiv.current.style.top = newTopHeight + 'px';
}
return (
<div
id="container"
style={{
display: "flex",
flexDirection: "column",
width: "100%",
height: "500px",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f3f3f3",
}}
>
{arrayExample.map((v, i) => {
return (
<div
key={i}
style={{
width: "50%",
padding: 50,
border: "1px solid black",
marginTop: 15,
}}
onClick={() => itemClickHandler(i)}
>
{v}
</div>
);
})}
<div
ref={rightDiv}
style={{
position: 'absolute',
top: 70,
right: '22%',
backgroundColor: "#4285F4",
width: 50,
height: 150,
borderRadius: 5,
transition: "top 0.5s ease-in-out"
}}>
moving screen(I want to Change top value)
</div>
</div>
);
};
export default Sample;
You can see this in action here: https://codesandbox.io/s/thirsty-curie-7mskj
In your click handler you can get the current position of the clicked div in px, you can easily google how to do this this (relative to the page, not the viewport). I would suggest storing this value in state, call it something like activeItemOffsetTop, then just set top to the current state
The strike through is not vertically centered.
My code is like this:
<Text style={{textDecorationLine: 'line-through', alignSelf: 'center', fontFamily: constants.FONTBOLD, color: constants.ORANGE, fontSize: 16}}>
well, we couldn't actually find a solution with the textDecoration property. But we did a work-around by placing absolutely a View. Like this (pseudo code)
const styles = StyleSheet.create({
parent: {
position: relative,
},
halfLine: {
width: "100%",
top: 0,
height: "35%",
borderBottomColor: "black",
borderBottomWidth: 1,
position: "absolute",
},
<View class={styles.parent}>
<View class={styles.halfLine} />
<Copy> $100 </Copy>
</View>```
I'm trying to position the FullWidthDiv component to span from the beginning of the MainDiv side, all the way to the end. I've tried giving in an absolute position and playing around with flex, but I can't get it to not start from the SubDiv component.
Is it possible to achieve this?
My CodeSandbox approach.
Here is what I'm trying to achieve
It is a little bit hacky, but you can center ChildDiv with align-items: center.
Also, shrink the FullWidthDiv to 280.
And last you have to add flex: 1, width: 100% to the div, that hold SubChildDiv inside App component.
export default function App() {
return (
<MainDiv>
<ChildDiv>
<div style={{flex: 1, width: '100%'}}>
<SubChildDiv />
<SubChildDiv />
</div>
<FullWidthDiv />
</ChildDiv>
</MainDiv>
);
}
const MainDiv = ({ children }) => (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: 250,
height: 250,
backgroundColor: "red",
padding: "1rem"
}}
>
{children}
</div>
);
const ChildDiv = ({ children }) => (
<div
style={{
width: 200,
height: 200,
backgroundColor: "blue",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between"
}}
>
{children}
</div>
);
const SubChildDiv = () => (
<div
style={{
display: "flex",
width: "100%",
height: 30,
backgroundColor: "green",
border: "1px solid black"
}}
/>
);
const FullWidthDiv = () => (
<div
style={{
width: 280,
height: 30,
border: "1px solid black",
backgroundColor: "green"
}}
/>
);
If you want the FullWidthDiv to be with 100% width, you have to calculate the 100% width and add the padding from both sides of MainDiv it will look something like that: calc(100% + 2rem).