Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

UPDATE: Even document.getElementById("chatbox").style.maxHeight = "calc(100% - 54px);"; with JS didn't work, so the problem is with assigning to the CSS property. Changing the value manually in the Elements tab of the Chrome developer tools works as it should.

There is an event where I create a p and insert it before a div . I need to then recalculate the maximum height of that div to make sure no unneeded scrollbars appear. To recalculate the maximum height I make a string in JS:

var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"
, pin being the newly created p element.
The string returns as supposed to: calc(100% - 25px - 29px);, however, the document.getElementById("chatbox").style["max-height"] doesn't accept it and stays unmodified.
The default original value of max-height is calc(100% - 25px);, 25px being the fixed height of an other div that has fixed position.
I tried to add 25 to the pin.getBoundingClientRect().height, but it still didn't work.
Changing the max-height value to the mhstr string in the Chrome developer tools does the job, but I want it to be changed via script.
Here is the div object:
<div id="chatbox" style="overflow-y: auto; max-height: calc(100% - 25px);">
Here is the code I use to try and change the max-height value:
var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"
console.log(mhstr);
document.getElementById("chatbox").style["max-height"] = mhstr;
Note: mhstr returns calc(100% - 25px - 29px);, changing ["max-height"] or maxHeight to a fixed value like 0, "2px" or "100%" works fine, but doesn't change to the mhstr.
                does the parent element have a fixed height? if not, max-height included 100% will not work, inside calc or by itself
– Yosef Tukachinsky
                Mar 4, 2020 at 11:55
                I tried both style["max-height"] and style.maxHeight. No difference. The div potentially fills up with other elements, so a fixed height isn't very good for it. The default calc(100% - 25px) works fine, it's just that the style itself doesn't want to change.
– GreatCorn
                Mar 4, 2020 at 11:57
                If the parent not have a fixed height calc(100% - 25px) should not work.. so it's sound very strange
– Yosef Tukachinsky
                Mar 4, 2020 at 12:07
If  25px is a fixed value, why not change your formula like so?
const mhstr = `calc(100% - ${25 + pin.getBoundingClientRect().height}px);`;
document.getElementById('chatbox').style.maxHeight = mhstr;
                @GreatCorn Did you check that console.log(pin.getBoundingClientRect().height); returns a defined value? And try to console.log(mhstr); just to be sure the issue is not in the changing of your css property.
– pistou
                Mar 4, 2020 at 12:12
                I console.log(mhstr) right before assigning to the maxHeight and it returns the supposed string = calc(100% - 25px - 29px);, pin.getBoundingClientRect().height returns 29 as expected
– GreatCorn
                Mar 4, 2020 at 12:14
                Very sorry, kept switching between the two. Your code does return calc(100% - 54px);, but maxHeight never changes
– GreatCorn
                Mar 4, 2020 at 12:17
If you want to use a percentage data type for max-height property, like these examples:
max-height: 100%;
max-height: calc(100% - 25%);
max-height: calc(100% - 25px);
Then you should have a parent element with fixed height.
So it doesn't matter you set the 'max-height' in CSS or JS in this type of case!
As you can see in the example below, the first group has a fixed-height parent, in contrast, the second group has an unfixed-height parent.
So the first one is semi-hidden after setting the max-height, but the second doesn't change at all!
document.getElementById("fixed-height-child").style.maxHeight = "10%";
document.getElementById("unfixed-height-child").style.maxHeight = "10%";
#fixed-height{
  height: 75px; /* parent height is specified exactly */
#unfixed-height{
  /* height value is not specified */
.child{
  overflow: hidden;
<div id="fixed-height">
  <p id="fixed-height-child" class="child">
    PARENT WITH FIXED HEIGHT
<div id="unfixed-height">
  <p id="unfixed-height-child" class="child">
    PARENT WITH UNFIXED HEIGHT
                Parent does exist, however, height is not specified nor fixed: <div id="chat" style="overflow-y: auto;">. As I've already said, changing the value manually in the Elements tab of the Chrome developer tools works as it should. The problem, I guess, is with assigning the css property.
– GreatCorn
                Mar 4, 2020 at 12:20
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.