I have an image as indicated below
I have to add buttons to the end of each of the six image lines upon page load. I added my first button and managed to manipulate the top
and left
css styles using jquery to get the button into it's proper place. Up to this point everything is working as expected and the button stays in place when resizing the screen etc. When however adding a second button and using the same left
style as with the first one I'm running into an issue where the first button is drawn more to the left, even though it has the same left
style as the second button. For example
I logged the left values of both buttons as I resized to the console, as seen from the below image the values are the same
Here is my HTML
<div id="vehicleContainer" class="ibox-content text-center">
<button id="rdtLeftFrontTyreButton" class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-times"></i></button>
<button id="rdtLeftRearInnerTyreButton" class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-times"></i></button>
<img id="vehicleImage" src="~/content/RDT.png"/>
</div>
and here is my javascript function used to place the buttons in the correct positions
function drawLayout() {
var vehicleContainer = $("#vehicleContainer");
var vehicleContainerHeight = vehicleContainer.height();
var vehicleContainerWidth = vehicleContainer.width();
var vehicleImage = $("#vehicleImage");
// Set image height relative to the screen height
var vehicleImageHeight = (vehicleContainerHeight * 98) / 100;
vehicleImage.height(vehicleImageHeight);
// Set image width relative to the screen width
var vehicleImageWidth = (vehicleContainerWidth * 60) / 100;
vehicleImage.width(vehicleImageWidth);
var rdtLeftFrontTyreButton = $("#rdtLeftFrontTyreButton");
var rdtLeftFrontTyreButtonTop = (vehicleContainerHeight * 39) / 100;
var rdtLeftFrontTyreButtonLeft = (vehicleContainerWidth * -0.5) / 100;
rdtLeftFrontTyreButton.css({
position: "relative",
top: -(rdtLeftFrontTyreButtonTop) + "px",
left: -(rdtLeftFrontTyreButtonLeft) + "px"
});
console.log(rdtLeftFrontTyreButtonLeft);
var rdtLeftRearInnerTyreButton = $("#rdtLeftRearInnerTyreButton");
var rdtLeftRearInnerTyreButtonTop = (vehicleContainerHeight * 1.5) / 100;
var rdtLeftRearInnerTyreButtonLeft = (vehicleContainerWidth * -0.5) / 100;
rdtLeftRearInnerTyreButton.css({
position: "relative",
top: -(rdtLeftRearInnerTyreButtonTop) + "px",
left: -(rdtLeftRearInnerTyreButtonLeft) + "px"
});
console.log(rdtLeftRearInnerTyreButtonLeft);
}