Topic: How to style alert premium component bootstrap 5
Expected behavior*dismissable X is stylable.*Actual behavior**X is close to words and unable to be moved by css
<div class="alert alert-success alert-dismissible fade show" role="alert">
You have successfully logged in!
<button id="close-x" (click)="notificationRef.close()" type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Resources (screenshots, code snippets etc.)** #close-x{ position: absolute; top:0px; left: 3px; /margin-right:5px;/
}
Here is an example, you need to add these styles globally (to the styles.scss file):
.alert .btn-close {
right: 50px;
}
Originally the button has right: 0px style and it should be displayed near the right border (it also has some padding). If in your case this position is different it may be caused by some custom styles.
Evolet free commented 2 years ago
Ok, my styles.scss is mostly empty except for the imports: @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';@import '~@fortawesome/fontawesome-free/scss/solid.scss';@import '~@fortawesome/fontawesome-free/scss/regular.scss';@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';I am using angular ui kit pro essential bootstrap 5. Am I looking in the wrong place? I see scss files for alert.scss in different spots. One for colors and the other for positions. But modifying it there hasn't let me apply the style.
Arkadiusz Idzikowski staff commented 2 years ago
@Evolet You need to add these styles to the src/app/styles.scss after the mentioned import statements (you can also create a new custom scss file, add scss rules there and add this file import to the import statements list).
We need more information. Where exactly do you add these styles - to the global styles, the styles of the alert component, or the component that contains the code that opens the alert? Try to add styles globally or in the alert component.
Evolet free commented 2 years ago
Ok, yeah I was trying in the alert component directly to the divs/elements in the alert.component.html. I am just having trouble overriding the default styles. I can look in the documentation on styling you guys have but could use any additional tips.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 2.1.0
- Device: Laptop
- Browser: Google Chrome Dev
- OS: Mac OS
- Provided sample code: No
- Provided link: No