Hi,
I am using some of the px components and applied px-dark-theme-styles in my application. But px-modal component styles are not changed as per the theme. So i have tried the following way -
<px-modal #runForecastModal>
<div slot="header" class="run-forecast-header">Run Forecast</div>
<div slot="body" class="run-forecast-body">
<p>Do you wish to run a new forecast?</p>
</div>
<button slot="accept-trigger" class="flex__item btn btn--bare--primary">Yes, Run</button>
<button slot="reject-trigger" class="flex__item btn btn--bare--primary">Cancel</button>
</px-modal>
And it looks like below,
However, i could not able to change the background color of the bottom portion i.e., below body slot. Would like to apply the same background color for the body and its below portion. I could not find a slot like footer so that the i could change the style for the below portion too.
Please let me know how to change the background color of the buttons panel in px-modal component.
Thanks, Lakshmi
px-modal is shown by default opened and occupied full screen and all other UI components are behind this modal
You can modify this by adding/removing attributes from . If you add the opened and fill-container attributes to the element, the modal will be opened and occupy the full screen.
Ex: ````````
background-color: var(--px-modal-background-color, $gray20);
This will always fill the modal with the default background-color because of how css variables work. But you don't have to use css variables here at all. You only have to assign the value to the property.
Example:
px-modal {
--px-modal-background-color: $gray20
}
The above snippet will assign the color grey20 to the modal's background.
Hope that helps.
@Abhishek Dhaduvai, I haven't set opened and fill-container attributes to the element. Please refer my code snippet. I am using the exact code in my application. I also tried setting the custom property --px-modal-background-color as you mentioned. But still no luck, not changing background color of the px-modal component.
Earlier also when i tried to set any of the custom CSS properties of any of the px components, none of them worked. Is it possible to provide some working sample on setting custom CSS properties for any of the px component. It would be very helpful if the sample can be provided in angular instead of Polymer sample.
Thanks, Lakshmi
All the custom properties are available for styling are listed in the px-modal documentation's Styling section here: https://www.predix-ui.com/#/elements/px-modal
To change the background, you would add something like the following in your stylesheet
px-modal {
--px-modal-background-color: #e0e0e0;
}
Thanks for the quick response. I did go through the px-modal documentation and i tried changing the background color by using custom property as you mentioned in your answer. However, after setting the custom property i saw weird behavior. px-modal is shown by default opened and occupied full screen and all other UI components are behind this modal. BTW, my application is built in angular and we are using px components. Please see the below code snippets from my source code and let me know if i am missing something.
Angular Component Html Code Snippet
<px-modal #runForecastModal>
<div slot="header" class="run-forecast-header">Run Forecast</div>
<div slot="body" class="run-forecast-body">
<p>Do you wish to run a new forecast?</p>
</div>
<button slot="accept-trigger" class="flex__item btn btn--bare--primary">Yes, Run</button>
<button slot="reject-trigger" class="flex__item btn btn--bare--primary">Cancel</button>
</px-modal>
Code snippet from Component scss file
px-modal {
background-color: var(--px-modal-background-color, $gray20);
color: var(--px-modal-text-color, $gray5);
border: 2px solid gray;
}
Could you please help me to set the px-modal background color properly.
Thanks, Lakshmi
