I'm currently working on an Ionic App and I need to position some buttons (stacked vertically) at the bottom-left corner of the device's screen.
Here is the CSS I am using:
.button {
left = "1em";
z-index = "13";
overflow = "scroll";
position = "absolute";
width = "3em";
height = "2.5em";
textAlign = "center";
}
To calculate the button positions, I do the following:
let bottom: number = 0;
this.floors.forEach(floor => {
let floorButton: HTMLElement = document.createElement("button");
floorButton.setAttribute("class", "button");
floorButton.appendChild(document.createTextNode(floor.level));
floorButton.style.bottom = bottom + "em";
bottom = bottom + 5;
});
However, my issue arises when the app is viewed on devices with different screen sizes. The buttons end up higher on larger screens.
I've thought about calculating the screen height and adjusting accordingly, but it feels like a messy solution. Is there a cleaner way to achieve consistent button positioning without having to resort to pixel calculations? Can this be managed directly through CSS? I've explored @media queries but they don't seem to solve the problem. Am I overcomplicating things?
Any advice would be greatly appreciated. Thank you!