Modal Action Button Color Transparent

web
mobile

Topic: Modal Action Button Color Transparent

Aroquiassamy LA ROZE pro premium asked a year ago

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.)

check out the image

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


Damian Gemza staff answered a year ago

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


Aroquiassamy LA ROZE pro premium answered a year ago

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.,


Damian Gemza staff answered a year ago

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


Aroquiassamy LA ROZE pro premium answered a year ago

Hi @Damian Gemza

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...?


Damian Gemza staff answered a year ago

Dear La Roze,

There's no such config option for now, but we'll think about implementing it in the future.

Best Regards,

Damian


Damian Gemza staff answered 11 months ago

Dear @Aroquiassamy LA ROZE

This feature will be implemented with the next version of MDB Angular.

Best Regards,

Damian


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.4.3
  • Device: Lenova
  • Browser: Chrome 73
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No