Currently, I am facing an issue where I need to position an element below a fixed toolbar. The amount of top-padding required for this positioning varies based on the viewport width. To address this, I have created a formula that calculates the percentage of padding-top needed across different viewport sizes ranging from 2560px to 320px, which are the widest and narrowest widths our software supports. However, I am struggling to implement this formula in a CSS style.
This is my current approach:
getTopPadding = (): void => {
var x: number = $(window).width(),
paddingPercent: number = ((0.007589 * (2560 - x)));
if (paddingPercent < 5) {
paddingPercent += 5;
}
$('#appendHere').css('padding-top', paddingPercent);
};
The formula I have developed accurately determines the required padding-top based on the current viewport width. For instance, at a width of 320px, the padding should be,
padding-top: 17%;
While paddingPercent correctly calculates the value 17, using it directly as a value for the .css() method results in output like this
padding-top: 17px;
I am exploring ways to specify whether the value I pass should be in px, em, vw, or %. While attempting
$('#appendHere').css('padding-top', (paddingPercent + '%'));
I initially believed that appending '%' would add the necessary symbol and convert the value into a string since strings can be passed into the .css() method. However, upon further consideration, I realized that this usage is typically reserved for specifying aspects like color, rather than the scenario I'm dealing with. I also tried type casting by doing
Number((paddingPercent + '%'));
But this resulted in NaN. Therefore, I'm uncertain about the next steps. Any insights would be greatly appreciated.