https://i.sstatic.net/eztiy.png
<div *ngFor="let selected of base64textString;let index = index">
<img [src]="selected.imageString" style="height: 100px; width:100px;">
<i class="ft-trash-2 danger cursor-pointer" (click)="delete(item)"></i>
</div>
Is there a way to properly align the icon for uploading an image at the top right corner? I've been having trouble with this placement. Can anyone suggest the correct alignment for the icon?
Here is a suggestion to try out:
.div-image{
position: relative;
}
.div-icon{
position: absolute;
right: 10px;
top: 10px;
} <div class="div-image" *ngFor="let selected of base64textString;let index = index">
<img [src]="selected.imageString" style="height: 100px; width:100px;">
<i class="ft-trash-2 danger cursor-pointer div-icon" (click)="delete(item)"></i>
</div>To ensure proper alignment, make sure to set the parent div with position: relative so that the child div-icon can position itself correctly within its boundaries.
If you're looking to resolve this issue, utilizing Flexbox could be your solution. Give it a try:
.div-image{
display: flex;
flex-direction: column;
justify-content: center;
}
.div> i{
align-self: flex-end;
font-size:1rem;
}<div
class="div-image"
*ngFor="let selected of base64textString; let index = index"
>
<i
class="ft-trash-2 danger cursor-pointer div-icon"
(click)="delete(item)"
></i>
<img [src]="selected.imageString" style="height: 100px; width: 100px" />
</div>I have successfully retrieved data from a URL in JSON format and displayed it on an HTML page. You can see the output in the image below: https://i.sstatic.net/UEVvD.png Now, I am looking to enhance the functionality by allowing users to click on a speci ...
Can someone help me with an issue I'm having while trying to retrieve a JSON file from the server using a GET method? { "myKey": [{ "code" : "RMB", "symbol" : "¥", }] } When making the Nativescript GET request, ev ...
One feature on my website is a sliding panel (Image 1) located on the right side. It appears and disappears when a button is clicked, covering the entire height of the screen.https://i.sstatic.net/dF5Zc.jpg Here's the CSS code for this sliding panel- ...
Currently, I am working on my portfolio and facing a challenge. I have an image in the body that I really want to display diagonally, but without using Photoshop. I've attempted to achieve this effect by utilizing CSS3 properties like transform rotate ...
After the recent upgrade from beta to RC1, I've encountered some routing issues. While some routes are functioning properly, others throw the following exception: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider ...
In my layout, I have two grids: one for the header and one for the footer. In between these two grids, I am using a sidebar on the left side. Below is the JavaScript code I am using: function adjustSize() { var heights = window.innerHeight; docum ...
During my experience with the dx-calendar component from DevExtreme, I encountered an issue. I was attempting to set Monday as the first day of the week by passing 1 to the firstDayOfWeek property. Initially, I tried: <dx-calendar firstDayOfWeek="1 ...
Searching for a solution to read and store data from a text file, I encountered the issue of variable scope. Despite my attempts to use the data across the project by creating a global variable, it still gets cleared once the variable scope ends. import ...
I'm currently troubleshooting an issue with a website that has suddenly stopped functioning properly. Unfortunately, I don't have access to the server at the moment, and I need to quickly understand how the system works. Essentially, there is a ...
I have searched for answers related to this topic, but so far I have not found any that are valid Currently, I am utilizing Angular 7 as my Framework and running into a particular issue. The components I have are: - Header - Landing app.component.html ...
I have an array of objects, with each element containing another nested object like this: data = [ { name: "A", type: "AA", children: [ { id: 1, name: "Child-A", admin: ["Y"] }], other: "NA" }, { name: "B", type: "BB", ch ...
I am encountering an issue with my next.js app where the body background color is set to black. Here is the code in globals.css: body { background-color: black; padding: 0; margin: 0; font-family: 'Titillium Web', sans-serif; } However, ...
In the process of creating a review page for my app that showcases uploaded files, I've encountered an issue. Whenever a user uploads files with errors, I want to display a warning message below each specific file. Currently, I'm able to show the ...
Currently, with the latest version of iOS (14.4), there is a zoom effect on any input box that receives focus, unless the input has a font size of 16px without focus. While this may not seem like an issue initially, once focus moves away from the input bo ...
Sorry for the not-so-great title, I'm still learning the terminology. I have a situation where a div is covering part of a background image when the screen is wide. However, on smaller screens, I want that div to move below the background image inste ...
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel= ...
My parent Component is structured like this: import { Component} from '@angular/core'; @Component({ selector: 'app-main-parent', template: '', }) export class ParentComponent { constructor(protected service) { ...
I have a table in the .aspx file structured like this <asp:Table ID="tblRoles" runat="server" GridLines="Both" HorizontalAlign="center" Style="margin-top: 1em; margin-left:1em; margin-right:1em;"> <asp:TableHeaderRow ForeColor="White" BackCo ...
I am facing an issue. In my multi-module application with lazy loading, I encountered a strange behavior when trying to navigate between child lazy modules. Transition from top module to bottom child module works fine, but routing from one bottom child la ...
Explanation: I have developed a custom websocket connection to communicate with a netty server on my website. My implementation involves splitting large messages into smaller parts to enable concurrent sending over a single socket, which is currently funct ...