Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure:

<div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first">
    <table>
      <td class="steps" [ngClass]="{ last: last }">
        <img class="completeimg" src={{step.img}} alt="">
        <p class="card-text1"> Step {{i+1}}: Completed</p>
        <p class="card-text1">{{step.ReturnDisplayC}}</p>
        <p class="card-text1"><b>Date:</b> {{step.ReturnStatus}}</p>
        <p class="card-text">{{step.ReturnStatus}}</p>
      </td>

    </table>
  </div>

I am looking to remove the arrow before the image in this dynamic data.

How can I achieve removing the arrow image for the next line of data as shown in the images below?

https://i.sstatic.net/wlkag.png

https://i.sstatic.net/PxiIh.png

javascriptcssangularbootstrap-4

Answer №1

Consider removing the td element that contains the arrow image.

<div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first">
    <table>
      <td class="steps" [ngClass]="{ last: last }">
        <div style="display: inline;">
          <img class="completeimg" src={{step.img}} alt="">
          <p class="card-text1"> Step {{i+1}}: Completed</p>
          <p class="card-text1">{{step.ReturnDisplayC}}</p>
          <p class="card-text1"><b>Date:</b> {{step.ReturnStatus}}</p>
          <p class="card-text">{{step.ReturnStatus}}</p>
        </div>
      
      </td>    
    </table>
</div>

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

How to Incorporate LessCSS into the Blueprint Framework?

Can LessCSS be integrated with Blueprint framework? What are the prerequisites for starting? ...

cssless

A guide on obtaining the pixel dimensions of a ThreeJS mesh object: determining its visible width and height

I am currently grappling with the task of determining the visible view width and height of a ThreeJS mesh object in pixel units. In the image provided below, you can observe objects suspended in 3D space. Upon clicking the mouse, I need to be able to disc ...

javascriptthree.js

"Transforming a static navbar to a fixed position causes the page to jump

Having some difficulty figuring this out. I'm working on a bootstrap navbar that transitions from static to fixed when the user scrolls past the logo at the top. Everything seems to be working fine, except for when the navbar reaches the top, it sudde ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can information be exchanged between PHP and JavaScript?

I am working on a concept to display a graph of someone's scores within a div element. The process involves a button that triggers the graph drawing function upon clicking. Additionally, there is a data retrieval function that retrieves information fr ...

javascriptphpjquerygoogle-visualization

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

javascripthtmlcsscss-selectors

When creating a new instance of a class in Angular, the methods for initialization are not included

I have a User class set up like this: export class User{ id: number = 0; fName: string = ""; lName: string = ""; constructor(){} fullName() { return this.fName + ' ' + this.lName; } email ...

angular

Deciphering unconventional JSON formats

Can anyone identify the format of this JSON (if it even is JSON!) from the code snippet below? I've extracted this data from a website's HTML and now I'm struggling to parse it in C# using a JSON parser. The data requires significant preproc ...

c#javajavascriptjsonstring-parsing

The ng build command encounters a failure (module cannot be found) when running in a docker environment on Ubuntu, while it successfully runs

I'm facing an issue that I can't quite pinpoint whether it's related to docker, Ubuntu, or node/npm. Here are all the details I have: Although there are known causes for this module error, none of them explain why it works on various Window ...

angulardockernpmaws-codebuild

Handling multiple render calls and rerenders in React function components with setTimeout (best practice for firing multiple times)

Is there a way to optimize the Notification component in my App, so that the setTimeout function is only initialized once even if multiple notifications are pushed into the state? function Notification(props) { console.log("Notification function compone ...

javascriptreactjs

Generating alternate list items

I'm attempting to design a list style that resembles the one depicted in the image linked below: https://i.stack.imgur.com/U7vMw.jpg My issue is that when I try to add borders, they end up applying to the entire structure. .styled-list { list-st ...

htmlcsslist

The TinyMCE editor's input box lost focus while on a popup dialog

Whenever I attempt to access the TinyMCE editor in a dialog box popup and click on "Insert link", the "Insert link" dialog box pops up but I can't type anything into the text field. I suspect that the issue may stem from having a dialog box open with ...

javascriptjquerydialog

jqGrid: What could be causing the events I defined for grid edit to not fire?

I've been attempting to make in-line edits on a grid, but it seems like none of the events connected to those edits are being triggered. I am specifically looking to use afterSubmit: so that it triggers after the user has edited the Quantity field in ...

javascriptjqueryasp.net-mvcjqgrid

Arrays Filtering without Containing Elements

Is there a utility function in Knockout to filter one array based on another array, or will I need to use JavaScript? First : var obj1 = [{ "visible": "true", "id": 1 }, { "visible": "true", "id": 2 }, { "visible": "true", "id": ...

javascriptknockout.js

"Critical issue: Meta tags are not present on the dynamic pages of the NextJS

In my NextJS application, the pages are structured as follows: App --pages ----_app.js ----index.js ----company.js ----users ------[userID].js I have a dynamic page named [userID].js that retrieves the userID through the router to display information for ...

javascriptnext.js

Ways to eliminate dates from the text of listed items

Before finalizing their registration, users on our site are shown a review page. This panel displays all the items they have selected, creating a unique and variable list for each individual. However, each item in the list starts with a distracting date/ti ...

javascriptjqueryhtml

Issue where the background color remains the same and does not change

I'm having trouble identifying the issue in this code. I am attempting to change the background color using the following CSS: body { background-color: black; padding: 0px; margin:0px; height: 1500px; } However, it doesn't seem to ...

htmlcssbackground-colorstatic-pages

issue TS2322: The function returns a type of '() => string' which cannot be assigned to type 'string

I have recently started learning Angular 6. Below is the code I am currently working on: export class DateComponent implements OnInit { currentDate: string = new Date().toDateString; constructor() { } ngOnInit() { } } However, I am encounterin ...

angulartypescript

Execute a series of promises sequentially, ensuring that each subsequent promise is only run after the previous one has been resolved

I am in the process of creating a script that will execute all found .sql files within a designated folder one by one. The objective is to halt the execution if any one of the scripts fails. The structure of my folders is as follows (and I initiate the scr ...

javascriptnode.js

Add a symbol at the end of the input that signifies its value

I have a form field that expects a percentage as input, but I want to visually indicate to the user that they should enter a percent value. The challenge I face is that I want the percentage symbol to appear before the number in the input box, like this: ...

htmlcssreactjs

Siblings are equipped with the advanced selector feature to

I'm struggling to understand this setup I have: <div class="container"> for n = 0 to ... <a href="some url">Link n</a> endfor for each link in ".container" <div class="poptip"></div> ...

javascriptjqueryhtmlcss