My image doesn't appear in the correct position when I dynamically set it using the margin-top.
Below is an image with a red arrow pointing to the right, which is what I want:
https://i.stack.imgur.com/ue4mY.png
The CSS I have is as follows:
.file_arrow_right {
background: url('../images/right_icon.png') no-repeat;
cursor: pointer;
width: 35px;
height: 22px;
background-size: 18px;
background-position: 0px;
margin-top: -500px;
}
I only want to change the margin-top of the above CSS dynamically based on certain image height, so I used the following code:
app.controller('filePreviewSectionCtrl',
function ($scope, $q, $sce, $rootScope, $filter, $compile, $timeout, $state,
$modalInstance, commFile, blobUrl) {
var myBase64 = "data:"+commFile.fileType+";base64,"+commFile.image+"";
//jpeg, .jpg, .bmp, .png, .txt
if(commFile.fileType.split("/")[1] == "jpeg" ||
commFile.fileType.split("/")[1] == "jpg" ||
commFile.fileType.split("/")[1] == "bmp" ||
commFile.fileType.split("/")[1] == "png") {
$scope.imgBlob = myBase64;
var img = new Image();
img.src = myBase64;
img.addEventListener('load',function(){
var width=img.width;
var height=img.height;
console.log("width: "+width);
console.log("height: "+height);
// should change dynamically
$scope.arrowMarginTop = "margin-top: "+height/2+"px";
});
}
})
This is the HTML:
<script type="text/ng-template" id="filePreviewSectionCtrl.html">
<div id="dynamicFile" style="width:100%; height:100%;">
<div class= "file_arrow_right" ng-class="arrowMarginTop">
</div>
</div>
</script>
UPDATE:
Following @Temani's suggestion that span elements are inline and won't be affected by margin-top, I changed the span to a div. Then, I used @Satpal's answer to dynamically change the CSS.