I'm creating some div that has 2 div inside.
The first div comes from a function called borderDiv() which return a div giving some classes depending on the arguments.
allData.map(data => {
const isTwoRows = data.textToRender.length <= 50 && data.textToRender.length > 30;
const isThreeRows = data.textToRender.length > 50;
return (<div className="parent-border">
{borderDiv(isTwoRows, isThreeRows)}
<div>
{data.textToRender}
</div><
/div>);
})
When receives isTwoRows the first div inside have classes that assign a height of 20px. When receives isThreeRows the height will be 40px.
It works ok on giving classes, so the function borderDiv() is working ok, but my problem is setting correctly the value for 2 or 3 rows.
Right now I'm just counting characters of the given string. If it's higher than 50, I will say that is isThreeRows or if it is ]30, 50] it will be isTwoRows.
I want to ask how could I set in a correct way the quantity of rows of text that the parent div (the div with class parent-border) has. Or in other words, get the height that has rendered the parent div of borderDiv. By getting that height, I could give as an argument to borderDiv() and then pick the correct class.
I tried to just set something like:
// in css:
.border-div {
height: inherit;
}
<div className="parent-border">
<div className="border-div"> // This will be the div rendered
<div>{data.textToRender}</div>
<(div>
Expecting to inherit the dynamic height of "parent-border" but this class has not a specific height, because it can change depending of how log the rendered text is. Example of rendered texts:
"a short text" <-- 1 row, so border-div height will be 20px
"a longer text that needs
to me adapted" <--- 2 rows, so border div should be 40px
Any hint please.
There's a built-in function called getBoundingClientRect, which allows us to do precisely what you want—get the current width and height of an element.
const { width, height } = $el.getBoundingClientRect();
// do something, e.g. (made up numbers)
const isTwoRows = height > 30 && height < 60;
const isThreeRows = height > 60 && height < 90;