4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🐛 fix resize bug

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 15:03:54 +02:00
parent 7eb775d1e3
commit 959bbedcfa
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
View File

@ -3,10 +3,10 @@
.root { .root {
.content { .content {
display: flex; display: flex;
.sides { .sides {
min-height: calc(100vh - 83px); min-height: calc(100vh - 83px);
flex: 1; height: fit-content;
width: 50%;
@media (max-width: $screen-m) { @media (max-width: $screen-m) {
width: 100%; width: 100%;
} }

18
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
View File

@ -5,6 +5,7 @@ import Image, { StaticImageData } from "next/image";
import React, { ReactNode, useEffect, useRef } from "react"; import React, { ReactNode, useEffect, useRef } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { useWindowSize } from "@uidotdev/usehooks";
type IProps = { type IProps = {
title: string; title: string;
@ -30,9 +31,22 @@ export default function DefaultDoubleSidePage(props: IProps) {
useEffect(() => { useEffect(() => {
// make second element ref height same as first element ref height // make second element ref height same as first element ref height
if (firstElementRef.current && secondElementRef.current) { const resizeObserver = new ResizeObserver(() => {
secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`; if (secondElementRef.current && firstElementRef.current) {
console.log("Recalculate");
if (secondElementRef.current.clientHeight !== 0) {
secondElementRef.current.style.height = `0px`;
}
secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`;
}
});
if (firstElementRef.current) {
resizeObserver.observe(firstElementRef.current);
} }
return () => resizeObserver.disconnect();
}, []); }, []);
const firstElementRef = useRef<HTMLDivElement>(null); const firstElementRef = useRef<HTMLDivElement>(null);