I'm new to react, trying to build brand carousel using react-multi-carousel.
The images are displayed properly but I want to center the image. Tried to write css it did not apply on the carousel. How this can be achieved, Or do I have to use any other carousel?
`
<Grid item xs={12}>
<Carousel
responsive={responsive}
infinite={true}
arrows={true}>
<Image src={abt.logo_carousel.url}responsive/>
<Image src={abt.logo_carousel1.url}responsive/>
<Image src={abt.logo_carousel2.url}responsive/>
<Image src={abt.logo_carousel3.url}responsive/>
</Carousel>
</Grid>`
write style inside your tag itself.like this
<img src="..." style={{width:300,marginLeft:"auto",marginRight:"auto"}} />
I'm a little bit late but hope this could help someone (it worked for me):
<img src={source} style={{marginLeft: "auto", marginRight: "auto", display: "flex", justifyContent: "center"}}/>
Related
Good evening,
I am looking for a better way to display what you see in the picture. With the CardHeader this is all not centered and I can't use any useState methods.
how it should look
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<CardHeader avatar={<Avatar sx={{ bgcolor: red[500] }} aria-label="logo">N</Avatar>} action={<IconButton aria-label="enable"><FavoriteBorderIcon /></IconButton>} title="Netflix" subheader="netflix.com" />
</Card>
The way it looks here is how I want it to look in the end, but I can't useState methods here. Also the content (e.g. the icon) is not centered vertically.
I dont know why there is a problem with useState hook. Feel free to add it to the and depending on the state switch between normal and red icon.
https://codesandbox.io/s/distracted-oskar-1h7xmj?file=/src/App.js
I am able to use the <img> tag no problem, but when I try to use the <Image> component, all that displays is an empty square the size of the image. The only way I have been able to get the image to display without using <img> is with the <Avatar> component. It's just a small brand image so it's not a huge deal, but I would like to use the built-in Next.js image optimization. And using <Avatar> does not feel very semantic as well.
It is being displayed inside of a ListItem component like this:
<Drawer variant="permanent" {...other}>
<List disablePadding>
<ListItem
sx={{
justifyContent: 'center',
alignItems: 'center',
}}
>
<Avatar
src="images/icons/agreement2.png"
alt="Scales of Justice Brand Image"
sx={{ width: 50, height: 50 }}
/>
</ListItem>
This is what I have tried so far:
I created a separate component for the image
import Image from 'next/image'
import brandImage from '../public/images/icons/law.png'
export default function Brand() {
return <Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
}
and displaying <Brand /> inside of the <ListItem> in place of the current <Avatar> component.
I tried to import the .png file and use
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
inside of the <ListItem>. And then I tried without importing the image and just using the full file path.
I tried placing <Image> inside of the <Avatar> component.
<Avatar>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Avatar>
I also tried adding in the layout prop with all of the options.
I am using Next.js v12.0.9 and MUI v5.4.2
I recommend creating a parent element with a position responsive and setting the image like this:
<Box sx={{position:'relative'}}>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Box>
You also may set it like:
<Box sx={{position:'relative', height:'50px', width:'50px'}}>
<Image src={brandImage} layout="fill" objectFit="cover" alt="Brand Logo" />
</Box>
This seem to work for me.
<Stack
sx={{
height: "500px",
}}
>
<Image
src={image.data.attributes.url}
alt={image.data.attributes.alternativeText}
width={image.data.attributes.width}
height={image.data.attributes.height}
objectFit="cover"
priority
/>
</Stack>
Using Stack seems to expand the image full width without using width: 100%
I'm trying to create a landing page in MUI v5 where half of the page is an image and the second part of the page is a form to login. I want the image and form to always fill the page completely with no scroll.
However, when doing so, it seems that MUI root is always affecting the margin so that the view has a horizontal scroll and there is white space on the left-hand side (See example below - and ignore the silly image):
How the page should look (and what it looks like if I scroll to the right):
How the page should look when I load it before scrolling:
I've spent hours trying to edit the CSS and figuring out where this is coming from with no luck. There is probably a better way to format this but I am using Grid and have tried Box with no luck.
My source code looks something like:
import React from "react";
import PropTypes from "prop-types";
import Grid from "#mui/material/Grid/Grid";
import Box from "#mui/material/Box";
import Paper from "#mui/material/Paper";
import SomeComponent from "...{some_path}...";
import SomeFormComponent from "...{some_path}...";
const SomeComponent = ({children, title, width}) => {
return (
<Grid container disableGutters sx={{height: "100vh", width: "100vw"}}>
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: `url(${SomeImage})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<SomeFormComponent width={width} title={title}>
{children}
</SomeFormComponent>
</Box>
</Grid>
</Grid>
);
};
Also, inspecting the page elements, I've identified the padding and margin come from a class called css-ayh9c9-MuiGrid-root which seems to be causing this because if I remove the class from the parent, everything works as expected. However, this is being added by MUI behind the scenes because it is nowhere in my source code.
Any help would be greatly appreciated!
I prefer Box whenever possible because Grid does some funky stuff with margins. In this case you can use the flex attribute on the children to get the right proportions. here is a working example https://codesandbox.io/s/material-demo-forked-rur3t?file=/App.tsx
I'm working on a reactJS web app . I get a value from the server , and i want to display it inside a grid item , but the problem is that the value is a long text,the value in my code is {signature} , and when it is displayed it does not fit the screen .
This is my try
<Paper className={classes.paper}>
<Grid container spacing={3} wrap="wrap">
<Grid item xs >
Your Signature:
<div style={{ flexWrap:'wrap' }}>
{signature}
</div>
</Grid>
</Grid>
</Paper>
<Copyright />
This is a screenshot of the result :
This is a simple css issue. You can try this.
<div style={{ maxWidth: '100%', overflow: 'hidden', wordBreak: 'break-all' }}>
You can wrap a long string with no spaces by using word-wrap css property with break-word value. Below is an example using HTML with CSS.
For React style; adapt the below css property to use camel case.
.wrap{
width: 200px;
word-wrap:break-word;
}
<div class="wrap">
oisphfpashdfpiahusdfpiuhapsiduhfpiuasdhfpiuahsdfpihaspiduhfpiasdhfpiuhasdpifuhapisduhfpiahsdfpihaspdifhpiausdhfpisdahfpihdspiuh
</div>
I'm using react-slick in one of my projects and for some reason when I turn off arrows the entire slider disappears
The code is looking like this
<div className="container" style={{position: "relative", padding: 0}}>
<div className={styles.class_name}>
</div>
<Slider onSwipe={this.swipeHandler} arrows={false}>
{this.props.children}
</Slider>
</div>
I'm using customized Bootstrap with only responsive utilities and grid.
Any help, suggestion etc would be very appreciated!