Updating the position of an element in HTML is not possible

For my webpage, I am attempting to adjust the position of all images that are displayed. Despite trying to change the position of a single image using the DOM method, I have run into a problem where the position does not update as expected. Although the console confirms that the position is being updated, the actual image does not shift. While I can manipulate the image's width by directly accessing it through the 'image' element variable, the same approach doesn't work for positioning.

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";
  }
}

Answer №1

The css code for the left property will only affect elements that are positioned, as detailed in this guide

To make the necessary changes, update your style like this:

img {
  display: block;
  position: relative;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Opening a modal from a different component in Angular 6

I am attempting to launch a modal that is associated with a separate component. However, I encountered an error ERROR TypeError: Cannot read property 'show' of undefined Here is my code: product-catalog.component.html <app-cart-table-modal& ...

When using Jest + Enzyme to test a stateful class component, encountering problems with Material-UI's withStyles functionality is a common issue

I have a React + TypeScript application with server-side rendering (SSR). I am using Material-UI and following the SSR instructions provided here. Most of my components are stateful, and I test them using Jest + Enzyme. Below is an example of one such com ...

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

Tips for preserving shopping cart in Angular?

As I delve into Angular, my goal is to create a straightforward ecommerce platform that allows users to add items to their cart, view them, and complete a checkout process. To accomplish this, I have set up three components: the products list, cart, and c ...

How do I insert items into an ES6 Map using a specific object key/value type in Typescript?

I'm looking to utilize Maps instead of object maps to define keys and values. However, it appears that Typescript doesn't fully support index types for ES6 Maps. Are there any alternatives or workarounds available? Furthermore, I want to enforce ...

Having trouble getting the HTML input textbox onChange event to fire properly?

This is the code I have been working on: <script language="JavaScript"> function toggle() { if (this.value=='1') { document.getElementById('dbOn').style.visibility='visible'; } el ...

The rxJS observable is failing to reach the subscribe method

I'm struggling to set up a simple observables system with Angular 2 and RxJS. My understanding is that the do operator is for side effects, and the subscribe() function is where you handle the results from the observable. In my scenario, the Compone ...

Dependency injection in Angular 2 service not functioning as expected

I am facing an issue while trying to retrieve static data from UserService in Angular 2. Although everything seems correct based on the documentation, it is not functioning as expected. Below is my UserComponent.ts import {Component ,OnInit } from ' ...

Running a function using a component in Angular 5

I am looking to develop an "action" component that functions similar to an "a" element. However, I need a way to track when the action is complete after clicking on the component. The main objective is to show a message while the action is in progress. He ...

Unable to send event from JavaScript to Component in Ionic

My goal is to notify a component that a script file has finished loading. My approach involves using the onload event of an element to dispatch an event. A service will then register an event listener for this event, waiting for clients to subscribe to an ...

Why do all the select boxes require two clicks to open the drop-down menu when the function is activated?

After implementing this code on my webpage, I noticed an issue where all select boxes required two clicks from the user to open the drop-down menu. The first click seemed to set focus on the box, and only on the second click would the drop-down actually ap ...

Is there a way to align these side by side?

Is it a silly question? Perhaps. But I can't seem to figure out how to align my text and colorpicker on the same line instead of two. Take a look at my fiddle. I've tried removing display:block and clear:both, but that didn't do the trick. H ...

The inability to display a Stylesheet is due to the unsupported MIME type, even though the MIME type seems to be missing when checking for errors

Every time I try to apply a specific style to a particular page on a website (even though the same style functions properly on other parts of the web server), an error message pops up. The error notification states Refused to apply style from 'styl ...

Increasing a number after a delay in an Angular 2 AppComponent using TypeScript

I'm attempting to create a straightforward Angular2 Application with TypeScript. Despite its apparent simplicity, I'm struggling to achieve my desired outcome. My goal is to display a property value in the template and then update it after 1 sec ...

Communicate through PHP and JavaScript chat to display HTML content in the chat window

I have been attempting to display HTML output in the chat window but instead, it is showing the HTML code. Here are the two files involved in the chat system: chat.js `function chatHeartbeat(){ var itemsfound = 0; if (windowFocus == false) { var ...

Creating a Stylish Navigation Bar with Bootstrap4 - Organizing Elements for Just the Right Look

I am trying to organize my content within a navbar into 3 different 'columns'. I want a logo on the left, some navigation items in the center, and the last element ("Get The App") on the right, but I am facing some challenges. Below is my code s ...

Icon for local system displayed on browser tab

I am currently trying to set a Browser Tab icon for the local system, but it is not working. However, when using an HTTP static icon, it works perfectly. Can someone please help me understand what the issue might be? PAGE 1 : Icon Not Showing <link re ...

There are occasional instances in Angular 6 when gapi is not defined

I am currently developing an app with Angular 6 that allows users to log in using the Google API. Although everything is working smoothly, I encounter a problem at times when the 'client' library fails to load and displays an error stating gapi i ...

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

The Angular Karma/Jasmine spyOn function generates an error stating that type '"x"' cannot be assigned to a parameter of type 'never'

I have a constant class set up below. However, when attempting to return a different value using spyOn to test error scenarios, I encounter a compile time error in ng test stating that Argument of type '"retryCount"' is not assignable to paramete ...