Como Comments - Answer Overflow

Como

Posts Comments

KPCKevin Powell - Community

•Created by Como on 10/21/2023 in #front-end

clientHeight in React

4 replies

KPCKevin Powell - Community

•Created by Como on 10/21/2023 in #front-end

clientHeight in React

4 replies

KPCKevin Powell - Community

•Created by Como on 10/21/2023 in #front-end

clientHeight in React

Here is react code:

const [tbodyHeight, setTbodyHeight] = useState();
const [containerHeight, setContainerHeight] = useState();
const [navHeight, setNavHeight] = useState();
const [sectionHeight, setSectionHeight] = useState();


const navRef = useRef(null);
const containerRef = useRef(null);
const sectionRef = useRef(null);
const tbodyRef = useRef(null);

useLayoutEffect(() => {
     setNavHeight(navRef.current.clientHeight);
     setcontainerHeight(containerRef.current.clientHeight);
     setSectionHeight(sectionRef.current.clientHeight);
     setTbodyHeight(tbodyRef.current.clientHeightHeight);

     const newTbodyHeight = `${containerHeight - (navHeight + sectionHeight)}px`;

     setTbodyHeight(newTbodyHeight);
     console.log(tbodyHeight)
    }, []);

const [tbodyHeight, setTbodyHeight] = useState();
const [containerHeight, setContainerHeight] = useState();
const [navHeight, setNavHeight] = useState();
const [sectionHeight, setSectionHeight] = useState();


const navRef = useRef(null);
const containerRef = useRef(null);
const sectionRef = useRef(null);
const tbodyRef = useRef(null);

useLayoutEffect(() => {
     setNavHeight(navRef.current.clientHeight);
     setcontainerHeight(containerRef.current.clientHeight);
     setSectionHeight(sectionRef.current.clientHeight);
     setTbodyHeight(tbodyRef.current.clientHeightHeight);

     const newTbodyHeight = `${containerHeight - (navHeight + sectionHeight)}px`;

     setTbodyHeight(newTbodyHeight);
     console.log(tbodyHeight)
    }, []);

4 replies

KPCKevin Powell - Community

•Created by Como on 10/17/2023 in #front-end

Not the same in other browsers

or if i remove overflow from the <main> and add fixed height for <tbody> (not in %) then it works

13 replies

KPCKevin Powell - Community

•Created by Como on 10/17/2023 in #front-end

Not the same in other browsers

if i add

overflow:hidden

overflow:hidden

to the <main> tag, it fixes whole layout, but then table breaks

13 replies

KPCKevin Powell - Community

•Created by Como on 10/17/2023 in #front-end

Not the same in other browsers

table's container takes hieight as much as needed to show table's tbody max content, even though there are header and footer that has height (which is those blue sections).

13 replies

KPCKevin Powell - Community

•Created by Como on 10/17/2023 in #front-end

Not the same in other browsers

i mean not about the scrollbar, about whole layout

13 replies

KPCKevin Powell - Community

•Created by Como on 10/17/2023 in #front-end

Not the same in other browsers