Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue.

    <div class="notification"
        [ngClass]="{'noty-error' : (caraouselItems[notificationIndex].notificationType==1),'noty-warn': (caraouselItems[notificationIndex].notificationType==2)}"
        *ngIf="caraouselItems[notificationIndex].message">
        <div class="firstPart">
            <i-feather name="x-circle" *ngIf="caraouselItems[notificationIndex].notificationType==1" class="noty-error-icon"></i-feather>
            <i-feather name="alert-triangle" *ngIf="caraouselItems[notificationIndex].notificationType==2" class="noty-warn-icon"></i-feather>
            <span>
                {{caraouselItems[notificationIndex].message}}
            </span>

        </div>
    </div>


  .notification {
    padding: 0px 14px  ;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 50px;
}

.noty-error {
    background-color:#32111C;
    border: 1px solid #D2232B;
}

.noty-error-icon {
    color: #D2232B;
    margin-right: 14px;
    stroke-width: 1 !important;
    width: 30px;
    height: 30px;
}

https://i.stack.imgur.com/9aXII.png

htmlcssangularformstext

Answer №1

  To achieve proper alignment, use the following style and make adjustments based on your desired position:

    Simply adjust the bottom value to suit your needs for proper alignment.

 <span style="position:relative;bottom:2px;">
                {{caraouselItems[notificationIndex].message}}
            </span>

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

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

As I type into a text box and log the keydown event in Chrome, I notice that it has various properties (specifically, I'm interested in accessing KeyboardEvent.code). Console Log Output { altKey: false bubbles: true cancelBubble: false cancelable: t ...

javascripthtmlangulartypescriptgoogle-chrome-devtools

Placing numbers at the top of the HTML table cell for better visibility

I am currently utilizing a two-column HTML table to showcase a list of rules. In one column, I have the rule's number, while in the other, I have the rule itself. However, I've noticed that the rule numbers are appearing near the bottom of their ...

css

Angular's Reactive forms: The power of bidirectional binding

Struggling with Reactive forms? I've encountered an issue where updating the model class when a User changes the input is easy, but what about programmatically changing the model and reflecting those changes in the HTML form? In simplified terms: th ...

javascriptangularangular-reactive-formsngmodel

Angular2 and Typescript paired with Visual Studio 2013

Currently, I am utilizing the angular2 QUICKSTART and encountering an issue where Visual Studio fails to recognize Angular2 with typescript import Modules. However, everything else seems to be functioning correctly: https://i.stack.imgur.com/0s46Y.jpg Th ...

visual-studiovisual-studio-2013typescriptangular

Problem with escaping special characters in random string HTML

As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...

javascripthtmlrandomescaping

Is there stability in using *ngFor for lists in Nativescript Angular?

Update: I have inquired about the current status of RadListView in Nativescript, questioning if it still exists. You can find more information here. Initial query: Is it suitable to utilize *ngFor for lists in Nativescript? Typically, I see recommendatio ...

angularnativescript

Angular 2- Custom input forms sourced from various components for enhanced user experience

I am currently working on creating an angular 2 form using template-driven and I want to reuse a custom input that I have created. My main component structure looks like this: <form (ngSubmit)="onSubmit(f.value)" #f="ngForm"> <custom-in ...

angularangular2-forms

What is the method for accessing a validator that has been declared in a reactive form group while within the scope of a custom

Currently, I have a custom component that I am happy with and it is being used in a reactive form as shown below. private init() { const control4 = new FormControl("yy", Validators.pattern(".{2}")); const control5 = new FormControl("zz", Validators.pa ...

angulartypescriptvalidationangular-reactive-forms

I'm diving into the world of Typescript and trying to figure out how to use tooltips for my d3 stacked bar chart. Any guidance on implementing mouseover effects in Typescript would be greatly

I am currently facing some issues with the code below and need guidance on how to proceed. I am new to this and unsure of how to call createtooltip. Any assistance would be greatly appreciated. The error message states that createtooltip is declared but n ...

angulartypescriptd3.js

Retrieve the additional navigation information using Angular's `getCurrentNavigation()

I need to pass data along with the route from one component to another and retrieve it in the other component's constructor: Passing data: this.router.navigate(['/coaches/list'], { state: { updateMessage: this.processMessage }, ...

angulartypescript

A guide on dynamically checking the checkbox values in each row of a table using JavaScript or jQuery

My table is dynamically populated with values from a database using the following code: var row = table.insertRow(i); i = i+1; // Insert new cells (<td> elements) at the 1st and 2nd position of the new <tr> element: var cell1 = row.insertCell ...

javascriptjqueryhtmlcheckbox

Creating an overlay effect when hovering over an image

Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role. .gallery { position: ...

htmlcssoverlay

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form

I am currently working on a user data collection project that involves filling out multiple forms. Each form has its own dedicated HTML page for personal details, educational details, and more. After entering personal details and clicking next, the data ...

javascripthtmlangularjsforms

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

javascriptjqueryhtmlcss

What is the best way to change the size of a background image

I recently discovered a helpful tutorial on resizing background images that I found very insightful. If you're interested, you can check it out here. After attempting to apply this method to a 900px width div in order to resize only vertically, I enc ...

jquerycsshtml

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

javascripthtmlangularionic4

Adjusted the background scale transformation without impacting the content inside the div

My concern revolves around the transform: scale property. I am trying to achieve a gradual zoom effect on my background when hovered over, without affecting the text content. I have omitted browser prefixes for brevity. Below is the CSS code: #cont-nl { ...

htmlcss

What are the steps for setting up Angular IDE on Ubuntu?

I am new to angular2 and I'm having trouble installing the angular IDE on my system. When I try to install it using npm, I encounter errors. Command : - npm install -g angular-ide Error Message:- npm WARN deprecated <a href="/cdn-cgi/l/email-p ...

node.jsangularubuntu-16.04

Incorporating a spectrum of hues into an HTML document

As a beginner in HTML, I recently stumbled upon a website (YT video) showcasing a stunning array of colors on buttons. You can check it out here: https://www.youtube.com/watch?v=OPaLnMw2i_0 I'm curious if these colorful designs can be applied to text ...

htmlreactjscolorsnext.js

Change the destination of an iFrame upon user click

Is it possible to redirect an iFrame to a different HTML page when clicked by the user? I have an iFrame that is essentially an HTML page. When I click on the iFrame, I want it to take me to another HTML page. This is my code: h1 { ...

javascripthtmlcssiframeframe