'Style Bottom and Left calc via JS not working [duplicate]

disclaimer: i simply forgot an attribute, as pointed out here https://stackoverflow.com/a/65531072/14824067 .

I wrote a much bigger code but for testing purposes I broke it down to a test code. Maybe it's a very small mistake -but I can't find it.

Do you see what I am missing?

WHAT I WANT TO DO: Set the top and bottom gap via js - it should work- I did it before - I only have to calculate it in the big program - and hence I use % and use the css "calc"-function

The test code is as follows:

       <!doctype html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>test</title>
            </head>
        
            <body>
                
                <p id="hi">hey</p>
                
                
            </body>
                    <script>
                        document.getElementById('hi').style.display= "block";
                        document.getElementById('hi').style.bottom= "calc( 50% "+" + "+" 20% )";
                        document.getElementById('hi').style.left=   "calc( 50% "+" + "+" 20% )";
                    </script>
        </html>
javascripthtmlcss


Solution 1:[1]

I replaced left with marginLeft and combined the strings and the code seems to work fine.

document.getElementById('hi').style.marginLeft= " calc(50% + 20%) ";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DumbCoder7

Related Questions