Zoom messes with display flex #443
Unanswered
SingularisArt
asked this question in
Q&A
Replies: 1 comment 1 reply
-
Found the solution to the first issue. I also re-named all the classes: <Grid container spacing={2} className="figure-grid">
{data[currentWeek] &&
data[currentWeek].map((figure, index) => (
<Grid item key={index} xs={12} sm={6} md={6} lg={4}>
<Zoom zoomMargin={50}>
<div className="figure">
<div className="figure-title">
{editMode ? (
<input
className="figure-name"
placeholder="Figure Name"
type="text"
spellCheck={false}
defaultValue={figure.title}
onKeyDown={(e) => {
if (e.key === 'Enter') {
const newTitle = e.currentTarget.value;
renameFigure(figure.title, newTitle, index);
e.currentTarget.value = titleText(newTitle);
e.currentTarget.blur();
setEditMode(false);
}
}}
/>
) : (
figure.title
)}
</div>
<div className="figure-content">
<img
className="figure-image"
src={`data:image/svg+xml;utf8,${encodeURIComponent(
figure.content || ''
)}`}
alt={figure.title}
onContextMenu={(e) => {
e.preventDefault();
openFigure(figure, index);
}}
/>
<BsTrash
onClick={() => {
setIsDeletePopupOpen(true);
setDeleteFigureIndex(index);
setDeleteFigureIndex(index);
}}
className={`edit-figure ${editMode ? 'enable' : 'disable'
}`}
/>
</div>
</div>
</Zoom>
</Grid>
))}
</Grid> And updated the CSS accordingly: .figure,
[data-rmiz-wrap='visible'] {
background-color: var(--figure-bg);
color: var(--figure-color);
border: none;
display: flex;
flex-direction: column;
min-height: 200px;
height: auto;
}
[data-rmiz-wrap='hidden'] {
width: 100%;
height: 100%;
}
.figure-title,
.figure-name {
background-color: var(--figure-title-bg);
color: var(--figure-title-color);
padding: 5px;
text-align: center;
margin-bottom: -10px;
border: none;
font-size: 16px;
}
.figure-name {
margin: -5px;
white-space: normal;
width: 100%;
}
.figure-name:focus {
outline: none;
}
.figure-name:placeholder,
.create-figure-text:placeholder {
color: var(--figure-title-placeholder);
}
.figure-grid,
[data-rmiz-wrap='visible'] {
justify-content: center;
align-items: stretch;
padding-bottom: 10px;
}
.figure-content {
background-color: var(--figure-content-bg);
color: var(--figure-content-color);
position: relative;
padding: 10px;
flex-grow: 1;
margin-top: 10px;
height: 200px;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.svg-content {
position: absolute;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.figure-image {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
} I'm still trying to figure out a solution to the second issue. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
When I wrap my div with the
Zoom
tag, it messes with the width and height. Here's a picture with and without the element:Here's the code snippets:
I'm currently using version 4.4.3 because I want to zoom in the div as well, which can't be done with any other versions according to issue #442.
Lastly, how can I disable the zoom? When the state variable
editMode
is true, I don't want the user to be able to click on the div and zoom in. Is there a parameter I can pass likedisable
orenable
or something?Beta Was this translation helpful? Give feedback.
All reactions