Hello!
I don’t have experience with css so maybe this will be a dumb question…
I’m trying to display a confirmation message to ask the user a choice between y/n.
In my app the popup appears but only the title is shown clearly, the content is shown in a very light gray color.
So I created a new role in the css file:
.anvil-role-alert-popup {
/* Alert popup container /
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
max-width: 400px; / You can adjust the width as needed /
margin: 0 auto; / Center the popup horizontally /
color: black; / Text color for both title and content */
}
and added the role to the code when I want to display the confirmation popup.
c = confirm("Test content", title="Test title", role="alert-popup")
but also in this case, “Test title” is shown as expected but “Test content” is not.
How can I set to black also the content of the message?
PS: I have the same problem with all confirmation messages, also the default email confirmation popup.
Don’t forget anvil objects are not plain structured objects. Sometimes the CSS roles must be more advanced. Applying it on general level won’t affect all levels of that structure.
Originally they are using On Surface for text color. So you can just change it in your color scheme or use CSS. Playing with colors there impact your alerts and different objects.
Open Dev Tools for example in google chrome: ctrl + shift + i
Test different settings then apply it via CSS Role
The Text is being controlled by:
Partial example from the CSS role for DataGrid Object, based on that you can create now your own role:
Just aplly the new role, open alert and check with the tools, why it is not to 100% applied. Then correct it and repeat.
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:first-child {
border-radius: 4px 0px 0px 0px;
}
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:last-child {
border-radius: 0px 4px 0px 0px;
}
/*Line at the end of the repeating panel, atm it's green*/
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:last-of-type {
border-bottom: 2px solid #009879;
}
.anvil-role-tonal-data-grid.anvil-data-grid .data-row-col {
font-size: 12px; /* set the font size to 12px */
align-items: center; /* center align the contents vertically */
justify-content: center; /* center align the contents horizontally */
text-align: center;
