Como Posts - Answer Overflow

Como

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

clientHeight in React

How to recreate same code in React? To be able to have scrollbar when more data is added to the table? JS code:

const containerElement = document.querySelector("div");
const tbodyElement = document.querySelector(".table tbody"); //container's second child
const sectionElement = document.querySelector("section"); //container's first child
const navElement = document.querySelector("nav"); //container's sibling

function updateTbodyHeight() {
  tbodyElement.style.height = containerElement.clientHeight - (sectionElement.clientHeight + navElement.clientHeight) - tbodyElement.offsetTop + "px";
}


updateTbodyHeight();
window.addEventListener("resize", updateTbodyHeight);

const containerElement = document.querySelector("div");
const tbodyElement = document.querySelector(".table tbody"); //container's second child
const sectionElement = document.querySelector("section"); //container's first child
const navElement = document.querySelector("nav"); //container's sibling

function updateTbodyHeight() {
  tbodyElement.style.height = containerElement.clientHeight - (sectionElement.clientHeight + navElement.clientHeight) - tbodyElement.offsetTop + "px";
}


updateTbodyHeight();
window.addEventListener("resize", updateTbodyHeight);

I tried using ref, but after page refresh table's tbody just dissapears or overflow is not working and height is just expanding.

4 replies

KPCKevin Powell - Community

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

Not the same in other browsers

13 replies

KPCKevin Powell - Community

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

Anyone knows how to achieve this design?

6 replies

KPCKevin Powell - Community

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

Force break short words

Is it possible to break a short words by force, even when elements' width is larger? I don't need to minimize width, just want to add some padding around, also do not want to use <br>. TRIED:

 word-break / overflow-wrap / inline-size

 word-break / overflow-wrap / inline-size

<a href='#'>Short word</a>

a{
padding: 6px 10px;
word-break: break-all;
}

<a href='#'>Short word</a>

a{
padding: 6px 10px;
word-break: break-all;
}

20 replies

KPCKevin Powell - Community

•Created by Como on 9/30/2023 in #front-end

Curve in the end for the last navigation link

4 replies

KPCKevin Powell - Community

•Created by Como on 8/22/2023 in #front-end

Curve between second and third <li>

I am trying to figure it out, how to get curve border on the bottom between two <li>, I added pseudo for this, but cant figure it out, what to do next. I added background color for <ul> to see what I want to achieve, also added comments to know which line to comment or uncomment to see. For now, it has grey square between second and third <li>. Would appreciate any help. https://codepen.io/aurasp/pen/yLGNyXa

18 replies

Gaming

Programming