Topic: Modal Action Button Color Transparent
Hi @Damian,
I'm Using Modal popup and I want to confirm action from modal.So, I'm using Action Button
Expected behavior
There Must be Difference between Modal Background-Color and Button-color
Actual behavior
Button and Modal color are same.Say for e.g: for warning I'm having same yellow color on both modal and button
Resources (screenshots, code snippets etc.)
const options = { closeButton: true, progressBar: true, actionButton: '', tapToDismiss: true };
const alertInstance = this.toastrService.success('', '', options);
alertInstance.onAction.subscribe(() => {
});
Change the button Color from transparent to something..and give me a solution.ASAP
Dear La Roze,
Please notice, that you're confusing two components (modal and toast). You're describing toasts using the modal keyword, and you're showing the toast code. Please do not do that, because this may confuse us.
About your problem: With the .md-toast-action class you can set the background color of the toast action button. From default, this button is transparent, so it's background color is the same as from toast.
Please add the below code to the styles.scss file:
.md-toast-action {
background-color: red;
}
Best Regards,
Damian
Hai @Damian,
I Already changed in Style.scss.... but I want to set Action button color in options from .ts file.Because I'm using multiple Toast for a single page for different scenario as Save,delete,warning etc.,
So add the background color style with Renderer.
After displaying an alert, find an element which contains class .md-toast-action and for this element use this.renderer.setStyle() method.
Best Regards,
Damian
Kindly Check the below one...
const options = { actionButton: 'yes', customActionButtonColor:'red'};
I want to set options like this for individual one customActionButtonColor:'red'...could you provide me like this...?
Dear La Roze,
There's no such config option for now, but we'll think about implementing it in the future.
Best Regards,
Damian
This feature will be implemented with the next version of MDB Angular.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 7.4.3
- Device: Lenova
- Browser: Chrome 73
- OS: Windows 10
- Provided sample code: No
- Provided link: No