Set background of div using flex - css

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.

Related

How to change the size of a component with effect when another component is rendered inside of it?

I have a modal component that overlays my page with a form to make some data inputs.
a second component is rendered next to the form when a certain condition is met (try to fetch data, render if anything is found).
When this happens I would like the whole card containing the two items to expand with some effect (horizontally if on desktop, vertically if on mobile), reducing smoothly the width of the first box during the transion.
I have tried to achieve this using a simple combination of the MUI Grid Container and Grid items,
but with this approach the second item always go on a new line or shows on the right but never changing the modal card overall size.
this is the style applied to the modal card:
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
display: 'flex',
flexDirection: 'column',
transitionDuration: '500ms',
minWidth: '30%'
}}
So I thought of wrapping the 2 brothers in some DIV and apply some custom CSS taking advantage of the transitionDuration to apply an effect. But I couldn't make it work.
here is the style applied to the DIV that wraps the 2 brothers:
<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
this is the div that contains the form grid container (1):
<div
style={{
flexGrow: 1,
minWidth: '30%',
transitionDuration: '500ms',
transitionTimingFunction: 'ease-out'
}}
>
and this is the div that contains the component to be shown when condition is met (2):
<div
style={{
paddingLeft: 10,
transitionDuration: '500ms',
transitionTimingFunction: 'ease-in',
whiteSpace: 'nowrap',
minWidth: condition ? '200px' : '0%',
width: '0%'
}}
>
can anybody point me in the right direction?
I'm new to CSS
Thanks
When you fetch the data you can add a class (.active or something similar)to the parent container as well and add the styles you want to change like
container.active > child{Blahblah styles}

Material UI Button Hover Not Working Absolute Position

I have a div with a button and another div in it. The button is normally hidden and the inner div has a bunch of graphs and text. In certain circumstances, I want to blur the inner div and have the button float on top in the middle of the blurred out section, kind of like you see on medium or news sites when asking for subscriptions (although I removed the logic for the example). The way I'm doing it is using absolute positioning for the button, but when I do that, all of the hover functionality just flat out isn't working on the button. It doesn't change the background color of the button or change the cursorI'm using material UI and react. Here is a code sample ->
const useStyles = makeStyles((theme) => ({
blur: {
filter: "blur(7px)",
},
relativePos: {
position: "relative",
},
absolutePos: {
position: "absolute",
top: "50%",
left: "50%",
},
floatingBtn: {
"&:hover": {
cursor: "pointer",
backgroundColor: "red",
},
},
});
// some other stuff
<div className={classes.relativePos}>
<Button
variant="contained"
color="primary"
className={`${classes.absolutePos} ${classes.floatingBtn}`}
>
Button Text
</Button>
<div className={classes.blur}>
{/* Blurred Inner Div Stuff */}
</div>
</div>
I'd love suggestions on either 1) how to get this implementation working OR 2) a better implementation NOT using absolute positioning, if there's a better, more modern approach.
There are two solutions:
use zIndex on the button that is greater than the blurred inner div
Move the button under your blurred inner div
I would prefer the 2nd approach as you don't need to know the zIndex of other elements
const useStyles = makeStyles((theme) => ({
blur: {
filter: "blur(7px)"
},
relativePos: {
position: "relative"
},
absolutePos: {
position: "absolute",
top: "50%",
left: "50%"
// zIndex: 1000 <- Add The zIndex here if you want 1st approach
},
floatingBtn: {
"&:hover": {
cursor: "pointer",
backgroundColor: "red"
}
},
// This is temp button to just toggle the absolute button
tempButton: { margin: "30px 0" }
}));
export default function App() {
const classes = useStyles();
const [showButton, setShowButton] = useState(false);
return (
<div className={classes.relativePos}>
{/* Your graphs area */}
<div className={classes.blur}>This is graphs area</div>
{/* Your absolute button with hover effect */}
{/* you can add it at the bottom and then no need to use zIndex */}
{showButton && (
<button className={`${classes.absolutePos} ${classes.floatingBtn}`}>
Button
</button>
)}
{/* Temp button to show/hide the absolute button, you should have ur own logic */}
<button
className={classes.tempButton}
onClick={() => setShowButton(!showButton)}
>
Click me to show/Hide the button
</button>
</div>
);
}
working example: codesandbox
BTW If you remove filter: "blur(7px)" from the blur class then the hover should work without changing anything in your code. I have no idea why (-_-)

How to apply multiple inline styles to a component as props?

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>

how to get React chartjs to resize back down with window

I have this code, which, for some reason, will grow when I resize a window, but not shrink. I was wondering how to remedy this.
https://codesandbox.io/s/react-chartjs-2-example-1nur4
import React from "react";
import { render } from "react-dom";
import LineDemo from "./LineDemo";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const App = () => (
<div style={styles}>
<table style={{ width: "100vw", borderCollapse: "collapse" }}>
<tbody>
{Array.from({ length: 4 }, el => "foo")
.concat(<LineDemo />)
.map(el => (
<td style={{ border: "solid" }}>{el}</td>
))}
</tbody>
</table>
</div>
);
render(<App />, document.getElementById("root"));
Have a detailed look at https://www.chartjs.org/docs/latest/configuration/responsive.html. The Important Note section mentions how responsiveness can be achieved. It states that
Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size.
In your case, the parent container for the line chart is the <div> element. The render function of LineDemo component in LineDemo.js file then can be modified to look like:
render() {
return (
<div style={{ position: "relative", margin: "auto", width: "80vw" }}>
<h2>Line Example</h2>
<Line ref="chart" data={data} />
</div>
);
}
Here is a working example: https://codesandbox.io/s/react-chartjs-2-example-hzygw
What worked for me was to add chart container a width style:
<div style={{width: '99%'}}>
<Bar options={options} data={data} />
</div>
However if I set width 100% it won't work lol

MUI Progress Indicator center align horizontally

Stack: Meteor + React + MUI
Here's my full code of my 'main' renderer components:
// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS
render() {
return (
<div className = "container">
<AppBar title = "test" />
<Tabs /> // Tab contents goes here
<RefreshIndicator
left={70} // Required properties
top={0} // Required properties
status="loading"
style={{
display: 'inline-block',
position: 'relative',
margin: '0 auto' }} />
</div>
);
},
I want to make Refresh Indicator horizontally center aligned beneath of myTabs like this whirling circle in this picture :
In the document of MUI here, this indicator comes with following styles:
display: 'inline-block',
position: 'relative',
With this styles I cant align it center horizontally, and without this styles, I can`t even locate it where I wanted.
What I have tried :
margin: 0 auto --> failed
text-align: center --> failed
display: flex --> failed
combination of 1 & 2 --> failed
left={$(window).width/2-20} --> This works but I'd like to use CSS only
The solution below centres progress indicator without any hacky calculations that cause element to be offset:
<div style={{display: 'flex', justifyContent: 'center'}}>
<RefreshIndicator status="loading" />
</div>
Here is how I did to ensure it's horizontally centered. Works great for me.
Set the parent component style to position: 'relative'.
Set the refresh indicator style to marginLeft: '50%', and left={-20} (assuming the size is 40).
here is the code (I put it in a CardText component).
...
<CardText style={{position: 'relative'}}>
<RefreshIndicator
size={40}
left={-20}
top={10}
status={'loading'}
style={{marginLeft: '50%'}}
/>
</CardText>
...
In MUI v5, there is a Stack component which serves as a flexbox container. By default the direction is column, to center it horizontally you can set alignItems to center:
<Stack alignItems="center">
<CircularProgress />
</Stack>
Live Demo
circularprocess in material ui and text middle of page stackoverflow
<div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
<CircularProgress />
<span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
</div>[![enter image description here][1]][1]
The Backdrop Component will place the progress indicator in the center and also can add a dimmed layer over your application. This component is available with MUI V5.
<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>

Resources