This question already has answers here:
Why the CSS calc() function is not working? [duplicate]
(1 answer)
How to use a unitless CSS variables and later add the needed unit?
(1 answer)
Closed 6 days ago.
What is the correct syntax to consume a css variable inline and calculate with that variable?
In the code below, there is a variable --value defined in the inner div. I want to consume that variable and use it to calculate a number. What is the correct syntax to do so?
export default function App() {
const [val, setVal] = React.useState<number>(3);
return (
<div style={{
position: "relative",
}}>
<h1>Consuming CSS variables</h1>
<input
id="val"
name="val"
step={10}
value={val}
onChange={e=>setVal(Number(e.target.value))}
type="number" />
<div style={{
display: "flex",
"--value": val
} as React.CSSProperties}>
<div style={{
display: "block",
margin: "3rem 6rem",
position: "absolute",
left: 0,
width: "50px",
height: "50px",
// transform: `scaleX(${100+val}%)`, // this works of course
transform: `scaleX(calc(100+var(--value))%)`, // <-- how to make this work?
backgroundColor: "red",
}} ></div>
</div>
</div>
);
}
Codesandbox: link
Related
This question already has answers here:
React force background color full height
(3 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 months ago.
I have a div, its style is style={{ width: '100%', height: '100%', overflow: "hidden" }}, but in f12 the div is 100% by 0
the div jsx component:
return (
<div style={{ width: '100%', height: '100%', overflow: "hidden" }}>
{/* some code */}
</div>
)
App.css style:
body, html {
text-align: center;
}
The elements that wrap this div don't have any styles.
If you need a particular div height, you can use px rather than a percentage. And if you need the full height of the screen, you can use viewport height.
Example:
style={{ width: '100%', height: '100vh'}}
I have an array called formulas, which I'm trying to map. However, all elements including a button which is rendered after the map is complete, are appearing side by side instead of one below the other:
Mapping code:
<div style={{ width: "67%" }}>
{showFormulas && (
<WidgetContainer
maxHeight={"40vw"}
style={{
width: "80vw",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{formulas.map((form, index) => {
return (
<div>
<div
style={{
border: "2px",
borderStyle: "solid",
}}
>
hi //gets rendered side by side
</div>
</div>
);
})}
<button onClick={() => this.addFormula()}> Create New Formula</button> //omitted style for reducing code
</WidgetContainer>
)}
</div>
this is what the WidgetContainer looks like in styles.js
export const WidgetContainer = styled.div`
background-color: white;
border-radius: 24px;
padding: 20px;
margin-bottom: 20px;
position: relative;
`;
How can I render them one below the other?
You are specifying the display to flex, that's why you are getting them side by side. You either remove the display flex or set the flex-direction to column.
I tried so many different things but nothing is working. It either breaks the application or only one style gets applied but not both at the same time. I have a parent component that passes some styles to a child and then the child itself has some local styles as well.
Parent component:
<CardSettings headline="Media accounts" size={{ flex: 1 }}></CardSettings>
Child component CardSettings.jsx:
const CardSettings = (props) => {
return (
<div style={({ background: '#fff' }, props.size)}>
<h2 style={styles.headline}>{props.headline}</h2>
{props.children}
</div>
)
}
What do I do wrong here? In this case flex: 1 gets applied but not background: #fff
Considering your size prop is an object you could use spread syntax to merge in those styles with the ones already inside that div:
<div style={{ background: '#fff', ...props.size }}>
<h2 style={styles.headline}>{props.headline}</h2>
{props.children}
</div>
Pre-ES6 Solution:
Alternatively you could try Object.assign as so:
<div style={Object.assign({{}, background: '#fff', props.size)}>
<h2 style={styles.headline}>{props.headline}</h2>
{props.children}
</div>
I can't find an answer for this, even though there are many flex themed questions.
I created a simple React app (npx create-react-app).
I then deleted App.css and set the contents of index.css to:
html, body, #root {
height: 100%;
margin: 0;
}
Next, in App.js I'm trying to have a full screen element using flex:
import React from 'react';
function App() {
return (
<div style={{ backgroundColor: 'blue', display: "flex", flex: 1 }}>
<div style={{ display: "flex", flexDirection: "column", flex: 1 }} />
</div>
);
}
But it just won't work. Why is the flex element not stretching?
The flex-grow works when there are other elements in the flex. It makes the element to grow x times in comparison to others.
wrt the solution you have implemented: inner div doesn't require display: flex and direction too. It will be inherited from the parent div.
To make the div take the full height. add height: 100vh to the parent div.
Let me know if this will solve the problem.
Thank you.
To achieve height of window you need to mention height: 100vh for parent tag like
class- .parent{height: 100vh}
object style - style={{height: '100vh'}}
import React from 'react'
function App() {
return (
<div style={{ backgroundColor: 'blue', display: "flex", height:'100vh' }}>
<div style={{ display: "flex", flexDirection: "column", flex: 1 }} >Hello world</div>
</div>
);
}
i am trying to develop a movie portal using react js. I am trying to display the movie poster, and the movie details adjacent to it.
I am using flex, but am encountering an issue with the output. The movie details are being pushed to an extreme end, and i am unable to figure out the reason.
I am trying to get the "The Dark Knight" adjacent to the poster.
This is the output screenshot
my Js code is as follows,
dialogContent: (backgroundUrl) => ({
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(${backgroundUrl}) `,
backgroundSize: 'cover',
overflow: 'hidden',
backgroundRepeat: 'no-repeat',
backgroundSize: '100%',
height: '33%',
minHeight: 400,
color: 'white',
padding: 10
}),
poster: () => ({
padding:5,
width:'100%',
margin:"auto"
}),
text:() =>({
color:"white"
}),
main:() =>({
backgroundColor: "black",
display: "flex"
})
}
class MovieDisplay extends Component {
render() {
//console.log(this.props);
const {movie} = this.props.location.state.movie;
return (
<div style={styles.main()}>
< div style={styles.poster()}>
<img src={movie.poster_path} />
</div>
<div style={styles.dialogContent(movie.backdrop_path)}>
<h1 style={styles.text()}>{movie.original_title}</h1>
<h2 style={styles.text()}>{movie.popularity}</h2>
</div>
<div >
<h5 style={styles.text()}> more content would be updated soon</h5>
</div>
</div>
);
}
}
Can anyone help figure out the reason?
Thanks in advance.
The problem is with the poster style set to width of 100% and margin of 'auto'.
poster: () => ({
padding:5,
// width:'100%', <-- Try changing this by either removing it or setting to 'auto' or a smaller value
// margin:"auto" <-- Get rid of this
})
One solution would be to add another inside main container, this way you have better control over the poster and movie information spacing. You should also add some justification/alignment to your flex styling, otherwise the child elements will float to the ends of the flexed container (As seen in your example).
Add the below to your styles.
main:() =>({
backgroundColor: "black",
alignItems: 'center'
}),
/*add this style*/
innerMain: () =>({
display: "flex",
}),
And then in your MovieDisplay component, write this.
<div style={styles.main()}>
<div style={styles.innerMain()}>
...
<div style={{width: 100 + '%'}}>
<h5 style={styles.text()}> more content would be updated
soon
</h5>
</div>
</div>
<div>
Edit: I've added a codepen to demonstrate what these styles will accomplish. More styling (like for the poster image) might be required but this is the general layout of what you're looking for.
I also added a minWidth of 200 to the dialogContent and made the div containing more content... have a width of 100% to fill the remaining space.