As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to troubleshoot it.
Below are snippets of the code I am currently working with:
**HTML COMPONENT**
<span>
<ngb-alert type="primary" (close)="close()" [dismissible]="dismissible"> {{errorMessage}}</ngb-alert>
</span>
**TYPESCRIPT COMPONENT**
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-ngbd-error-message',
templateUrl: './error-message.component.html',
styleUrls: ['./error-message.component.less']
})
export class NgbdErrorMessageComponent {
@Input() errorMessage: string;
@Input() close: () => void;
@Input() dismissible = true;
}
**LESS STYLING**
@import url('../../../global-less/color-variables.less');
:host {
width: 100%;
height: 100%;
}
:host .alert {
margin: 0;
}
:host .alert-dismissible .close {
padding: .6rem 1rem;
}
The class assigned to the button within the ngb-alert appears to be btn-close. Here is the HTML element rendered on the webpage:
<ngb-alert _ngcontent-ng-c2763413438="" role="alert" type="primary" ng-reflect-type="primary" ng-reflect-dismissible="true" class="alert alert-primary show fade alert-dismissible">Amidst a cascade of sparkling emerald leaves, the whimsical hedgehog orchestrated a symphony with a violin.<button type="button" aria-label="Close" class="btn-close"></button><!--bindings={ "ng-reflect-ng-if": "true" }--></ngb-alert>Here are the applied styles in sequence:
First Image of Styles
Second Image of Styles
See how it appears on the actual webpage:
Screenshot of Component
My current setup includes:
Angular - 16.2.2
NGBootstrap - 15.0.1
I have investigated possible reasons for the issue, such as:
- Conflicting Styles
- Incompatible ngbootstrap Version
- Missing Dependencies