CODEWITHSUNDEEP
htmlcssangulartypescriptdom
Oblivion
Oblivion

Reputation: 635

HTML cant update element position

Im trying to set the position of all the images that appear on my page. I tried to set the position of one image via DOM, but it seems to have no effect. The console is printing out the updating position message, but the image position is not being updated. I can access the image through DOM, as i can update the images width through the use the 'image' element variable. I just cant update its position.

HTML

<div *ngIf='this.imagesPerRow'>
  <div *ngFor="let image of images; let i = index; let last = last">
      {{last ? setPosition() : ''}}
    <img id={{i}} [style.width.%]="width" src={{image.src}} alt="">
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

img {
  display: block;
}

TypeScript

setPosition() {
  const image: HTMLElement = document.getElementById('1');

  if (image) {
    console.log("Updating position");
    image.style.left = "100px";
  }
}

Upvotes: 0

Views: 155

Answers (1)

ysf
ysf

Reputation: 4864

css left property works only on positioned elements as explained here

so chaging your style as follows should do it

img {
  display: block;
  position: relative;
}

Upvotes: 1

Related Questions