Alert button styles not working

Anvil Q&A
#1

Create a new app and add this code (copied from the documentation):

def form_show(self, **event_args):
  alert(content="Choose Red or Blue",
             title="An important choice",
             large=True,
             buttons=[
               ("Red", "RED", "danger"),
               ("Blue", "BLUE", "info"),
               ("Neither", None, "default")
             ])

According to the documentation the 3 buttons should have different colors, instead they have the same style.

#2

Thanks for the report. Styling alert buttons is not currently supported in Material Design. I’ll modify the documentation accordingly.

#3

Has the functionality to style alert buttons been added or requested as yet?

#4

There is a little bit of CSS to change in the Material Design but not a lot:

add this anywhere in theme.css

.btn-success, .btn-info, .btn-warning, .btn-danger,
.btn-success:hover:active:focus, .btn-info:hover:active:focus, .btn-warning:hover:active:focus, .btn-danger:hover:active:focus{
  color: white !important;
}

Comment out the .modal-footer .btn behaviour


/* .modal-footer .btn {
  background-color: transparent;
  color: %color:Primary 500%;
} */

Next - in theme.css find Component Button
In the next three selectors you will need to comment out the background-color

.btn, .btn-default, .file-loader>label {
...
/*background-color: transparent;*/
...
}

.btn:hover, .btn:focus, .file-loader>label:hover {
/*   background-color: rgba(153,153,153,0.2); */
...
}

.btn:active, .btn:active:focus {
/*   background-color: rgba(153,153,153,0.4); */
...
}

re-add the transparent background for btn-default and .file-loader


.btn-default  .file-loader>label {
  background-color: transparent;
}

And now you should be able to use the colours again!!!

1 Like
#5

@stucork Thanks very much, I will give this a crack.