1

I have an image as indicated below

enter image description here

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

enter image description here

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

enter image description here

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);
    }
1

1 Answer 1

1

Is this working? I see that you are using position:relative, so they already start with a different position. Because there are standing next to each other.

With display:block you can be sure that they have the same position left.

rdtLeftFrontTyreButton.css({
  position: "relative",
  top: -(rdtLeftFrontTyreButtonTop) + "px",
  left: -(rdtLeftFrontTyreButtonLeft) + "px",
  display: "block"
});

rdtLeftRearInnerTyreButton.css({
  position: "relative",
  top: (rdtLeftRearInnerTyreButtonTop) + "px",
  left: -(rdtLeftRearInnerTyreButtonLeft) + "px",
  display: "block"
});

Beside that, why are you doing relative and not absolute?

1
  • That's exactly the problem, didn't even think of it. Now I'm experiencing problems when resizing, but that is not related to this, thanks for the help Commented Mar 10, 2016 at 12:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.