<Image loading="lazy" src="/assets/blog/image.webp" alt="image photo" width="867" height="1300" style={{ maxWidth: '500px' }} />
maxWidth is not working in JSX.
It is not working because you have applied width="867" to the component which overrides style={{ maxWidth: '500px' }} the maxWidth specified in the inline css.
Remove width="867" attribute from the component and try using the below code:
<Image ... height="1300" style={{ maxWidth: '500px', width: '..px' }} />
<Image
loading="lazy"
src="/assets/blog/image.webp"
alt="image photo"
height={1300}
style={{ maxWidth: '500px',width:"100%" }}
/>
This should work.
Related
I try to build a sort of gallery that includes images and a 3d model of a tshirt. To do so i display the pictures of the shirt first then a button toggle the rendering of the 3d model. I know react-three-fiber canvas adapts to fill its closest parent but when the 3d model renders it starts to scale up gradually to fill the parent div. This behavior result in a bad UX. How can i remove that scale transition to display the model as i click the button ? I already tried debounce on the canvas but that just speed up the transition. Here's the code.
<div
class="container"
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%"
}}
>
<div
class="grid"
style={{
maxWidth: "30rem",
display: "grid",
gridTemplateColumns: "1fr",
gap: "20px"
}}
>
<div
style={{
display: "flex",
aspectRatio: "1/1",
width: "100%",
overflow: "hidden",
justifyContent: "center",
border: "1px solid black"
}}
>
{is3d ? (
<Canvas
style={{
overflow: "clip",
maxWidth: "100%",
height: "auto",
display: "block",
overflowClipMargin: "content-box",
verticalAlign: "middle"
}}
shadows
dpr={[1, 2]}
camera={{ fov: 38 }}
>
<Suspense fallback={null}>
<Stage
controls={ref}
preset="portrait"
intensity={1.5}
environment="studio"
>
false
<Model />
false
</Stage>
</Suspense>
<OrbitControls
ref={ref}
autoRotate={false}
enablePan={false}
minPolarAngle={Math.PI / 2.1}
maxPolarAngle={Math.PI / 2.1}
/>
</Canvas>
) : (
<img
style={{
overflow: "clip",
maxWidth: "100%",
height: "auto",
objectFit: "cover",
overflowClipMargin: "content-box",
display: "block",
verticalAlign: "middle"
}}
src={eye}
alt="image"
/>
)}
</div>
<button onClick={() => (is3d ? setIs3d(false) : setIs3d(true))}>
3D
</button>
</div>
</div>
Take a look at the result here
I appreciate if anyone can give a solution to add space between or space evenly between the two IconButton inside the ImageListItem in Material UI. The code uses Material UI library inside Reactjs
<ImageListItem
key={item?.id}
cols={item.cols || 1}
rows={item.rows || 1}
>
<img
{...srcSetStyle(item.url, 121, item.rows, item.cols)}
alt={item.url}
loading="lazy"
/>
<ImageListItemBar
sx={{
background: "transparent",
top: "5%",
}}
position="top"
actionPosition="left"
actionIcon={
<>
<IconButton
sx={{ color: "red" }}
>
{item.isFavorite ? (
<FavoriteIcon className="favoriteIcon" />
) : (
<FavoriteBorderIcon
className="favoriteIcon"
/>
)}
</IconButton>
<IconButton
className="addIcon"
sx={{
color: "red",
}}
>
<AddCircleOutlineIcon />
</IconButton>
</>
}
/>
</ImageListItem>
You need to change flex-grow attributes of both MuiImageListItemBar-titleWrap and MuiImageListItemBar-actionIcon classes of ImageListItemBar like this:
sx={{
background: "transparent",
top: "5%",
"& .MuiImageListItemBar-titleWrap": {
flexGrow: 0
},
"& .MuiImageListItemBar-actionIcon": {
flexGrow: 1
}
}}
After that, you need to wrap your icons with a div and add desired style like this:
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
... (action button icons here)
</div>
You can take a look at this sandbox for a live working example of this solution.
I want to implement flex system from material-ui using the Stack component Im faced with a issue. The other half of my screen is displaying another component or blank space and I dont know how to get rid of it.
I'm using the Stack component from material-ui and the normal html iframe tag to build a code editor. Any Idea how I can fix this using Stack?
Screenshot of UI:
Here is my code:
index.js
<Stack sx={{ bgcolor: 'white', pt: 1 }}>
<TabContext value={value} >
<Box sx={{ borderBottom: 1, borderColor: 'divider', bgcolor: 'white' }}>
<TabList onChange={handleChange} >
<Tab label="HTML" value="1" />
<Tab label="CSS" value="2" />
<Tab label="JS" value="3" />
<Tab label="Output" value="4" sx={{ display: { xs: 'block', md: 'none' }, mt: 1 }} />
</TabList>
</Box>
{value === '4' ?
<Stack sx={{ height: 'calc(100vh - 201px)' }}>
<iframe title="result"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
srcDoc={iframeDisplay}
/>
</Stack>
:
<Stack direction="row" sx={{ width: '100%', height: '100%', position: 'relative'}}>
<Stack sx={{ width: { xs: '100%', md: '50%' }, bgcolor: "white" }}>
<TabPanel value={value} sx={{ p: 0 }}>
<CodeMirror
value={codeEditor.value}
height={CODE_EDITOR_PROPS.height}
theme={CODE_EDITOR_PROPS.theme}
extensions={codeEditor.extensions}
onChange={onChange}
/>
</TabPanel>
</Stack>
<Box sx={{ display: { xs: 'none', md:'flex' }, height: 'calc(100vh - 201px)', width: 'calc(50% - 1024px)'}}>
<iframe
title="result"
frameBorder="0"
height="calc(100vh - 201px)"
srcDoc={iframeDisplay}
/>
</Box>
</Stack>}
</TabContext>
</Stack>
I have a Material UI dialog that will display a bunch of images, the images have landscapes or portraits aspect ratio. And they might have different resolutions as well. I want to find an elegant solution to maintain the dialog's height 80% of the screen.
But fit the whole image inside the dialog, without needing to scroll, here's a SandboxExample.
Or find the snippet bellow:
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
hasCloseButton
style={{ maxWidth: "100%", maxHeight: "100%" }}
>
<img
style={{ maxWidth: "100%", height: 'auto' }}
src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
alt="image"
/>
</Dialog>
</div>
to achieve that you may use viewheight unit (vh). Combine maxHeight(based on vh) along maxWidth: 100%. Dialog uses 32px as margin, hence you could use maxHeight: "calc(100vh - 64px)" or you can use a custom vh like maxHeight: "80vh"
<img
style={{ maxWidth: "100%", maxHeight: "calc(100vh - 64px)" }}
src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
alt="image"
/>
Can't you set the image height to 100% the element that contains it?
On your sandbox I did this: style={{ width: 'auto', height: '100%' }} and it seemed to work.
Here is the complete code:
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
hasCloseButton
style={{ maxWidth: "100%", maxHeight: "100%" }}
>
<img
style={{ width: 'auto', height: '100%' }}
src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
alt="image"
/>
</Dialog>
</div>
I'm new to material UI framework, i want to stretch the grid accordingly displayed in the content. I couldn't able to do that. Can anyone help me in this?
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">S</Avatar>}
title={
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent
style={{ overflow: "scroll" }}
className={classes.contentHeight}
id="chatList"
>
<div>
<Message isSender content="Hello" />
{this.state.data.map(item => {
if (item.isSender) {
return (
<Message isSender name="Sanjana" content={item.content} />
);
}
return <Message name="Sanjana" content={item.content} />;
})}
</div>
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
Can anyone help me in this query?
Thanks in advance!
Remove width: 100
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
width: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
should be
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
because the width: 100 gives it a width of 100px.
To make the content to stretch full width, you can use width: "fit-content" and assign your width value of 100 to minWidth: 100.
So your card will look like,
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
diaplay: "block",
minHeight: 40,
width: "fit-content",
minWidth: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
To make the content left align inside card, you can assign style to Grid like,
<Grid style={{ paddingBottom: 8, textAlign: "left" }} item xs={12}>
<span>{name}</span>
</Grid>
Forked sandbox