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

What is the best way to patiently anticipate a response from customer service

My singltone service contains a synchronous method. Upon injecting the service into a component: constructor( private reonMapLibraryService: ReonMapLibraryService ) {} I am unable to access reonMapLibraryService.data; immediately because it is an asy ...

angularangular8

Using ngControl in a custom validator directive can lead to a problem of cyclic dependency

I'm currently working on developing a custom Angular 2 validator directive and I'm looking to inject NgControl in the process. Here's an example of what I have: @Directive({ selector: '[ngModel][customValidator]', providers: [ ...

angularangular2-directives

Is there a way to customize the title on the Configuration Page within a Joomla Component?

Problem with updating string in Language File: COM_OHANAH_CONFIGURATION="Ohanah Konfiguration" I have tried adding the above string to the Language File, but it doesn't seem to reflect the changes. I have checked other Joomla Components and they all ...

phphtmlxmljoomla

Is the 404 error a result of the ajax code?

I'm currently working on a form that utilizes AJAX to validate and interconnect various form elements. Below is a simplified version of my code: <?php if( isset( $_POST['create_transaction'] ) ) { // do something } ?> <div> ...

javascriptphphtmlajaxhttp-status-code-404

Optimal Angular Project Structure for Creating an App with Admin Backend

After finishing "ng-book: The complete book on Angular 6," I am diving into Angular as a newcomer. As I venture into building my application, I have a specific question that has been lingering in my mind. The vision for my project includes: MainLayout: ...

angular

The radio buttons are stuck and not changing their selection

Having a group of radio buttons with the same name, when one is checked, it automatically selects another one in the group. Here is my current code: <input name="a" type="radio"> <input name="a "type="radio" checked> JS $("input[type='r ...

javascripthtml

Customize Zurb Foundation: Applying styles to specific child elements based on current screen size (large, medium, small)

For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...

csszurb-foundationcss-selectorsdescendant

Spinning Circle with css hover effect

I have recently developed a simple website: Within this website, there is an interesting feature where a circle rotates above an image on hover. However, despite my best efforts, I couldn't make it work as intended. Here's the code snippet I use ...

htmlcss

Why is this strange red dot character 🔴 appearing in the URL in FireFox?

While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...

htmlurlfirefoxcharacter-encoding

What is the most basic HTML include for use in an npm script?

Looking for a simple npm script to enable includes in my html file for modularity without using gulp, grunt, or webpack plugins. I've already tried nunjucks, twig, and html-importer but none of them have watch options. If you have suggestions on what ...

htmlimportnpm

Tips for implementing HTML5 validation followed by automatic redirection to a different page

I'm new to web development and struggling with how to make a button both validate inputs and redirect to another page. Using the onclick = "" function, I can validate inputs like emails and telephone numbers, but I'm having trouble making it so t ...

javascriptphpjqueryhtmlvalidation

Angular 2 Error: Unresolved Promise rejection - Unable to assign value to reference or variable

I'm currently working on an Ionic 2 app that includes a barcode reader feature. However, I encountered the following issue while trying to display data: Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: ; Task: Promi ...

javascriptangularionic2ngfor

Enhanced Fancybox Version 2 adjusts iframe width to fit content

I have been attempting to adjust the width of the iframe in fancybox v2 to fit my content properly. However, every time I try, the content appears too large within the iframe and requires horizontal scrolling to view it all. My goal is to see the entire wi ...

javascriptjquerycssiframefancybox-2

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

Display HTML element within the <samp> tag using PHP

I'm using Bootstrap for my form control, but my input and button are not on the same line. <div class="form-group"> <label class="col-lg-3 control-label" id="title-meaning">Meaning:</label> <div c ...

phphtmlcsstwitter-bootstrap

Removing a jQuery class while simultaneously adding it to different elements

I am currently working on a webpage where I have a row of 6 images. The first image, when the page loads, undergoes transformations using CSS3 due to a specific class applied to it. When the user hovers over the other images in the line, the same class is ...

jqueryhtmlcss

The Google Language Translator disregards the formatting

Currently, I am in the midst of developing a website with Wordpress and have successfully integrated Google Language Translator. Everything seems to be working well, except for one issue - when I translate the content, it alters the font size. Prior to tra ...

htmlcsswordpress

The system encountered an issue with the CSS code, indicating "Invalid CSS after "...inear-gradient(": expected selector, was "{"

While attempting to compile my sass code, I encountered the following error message regarding a syntax issue: /* { "status": 1, "file": "C:/Users/faido/Desktop/Productivity/sass css/project/sass/main.sass", "line": 36, "column": 9, "mes ...

cssnpmsasscompilation

Resolve issues with vue js checkbox filtering

As I embark on my Vue journey, I came across some insightful queries like this one regarding filtering with the help of computed(). While I believe I'm moving in the right direction to tackle my issue, the solution has been elusive so far. On my web ...

javascripthtmlvue.js

Send information to Angular's Google chart module

Currently, I am working with Google Charts in Angular 7 and have a specific requirement to dynamically pass the reportData into the drawChart function. var reportData = {"High":100, "Medium" : 200, "Low" : 300} generateChart() { setTimeo ...

angulargoogle-visualization