Predix_Logo
  • Categories
    • Questions
    • Predix | Updates
      • Pricing
      • Product
    • Deloitte - Private
    • How-To
    • Accenture-Private
  • Explore
    • Topics
    • Questions
    • Articles
    • Feedback or Feature Requests
  • Sign in
  • Home /
  • Questions /
avatar image
0
Question by rajyalakshmi.bh@ge.com · Apr 25, 2018 at 05:46 AM · px

How to change styles for px-modal component?

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,

alt text

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

custommodal.png (3.6 kB)
Comment
Add comment
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

  • Sort: 
avatar image
0

Answer by Abhishek Dhaduvai · Apr 26, 2018 at 12:00 PM

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.

Comment
Add comment · Show 1 · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image rajyalakshmi.bh@ge.com · Apr 27, 2018 at 06:47 AM 0
Share

@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

avatar image
0

Answer by Abhishek Dhaduvai · Apr 25, 2018 at 10:03 AM

Hi @rajyalakshmi.bh@ge.com

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;
 }
Comment
Add comment · Show 1 · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image rajyalakshmi.bh@ge.com · Apr 25, 2018 at 10:22 PM 0
Share

Hi @Abhishek Dhaduvai,

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

Follow this Question

Answers Answers and Comments

92 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Grunt watch error, when sering rmd-ref-app-ui locally 1 Answer

accept file validation is not applied when we choose a file to upload(px-file-upload) 1 Answer

Hiding empty scrollbar? 0 Answers

404 errors - CSS/HTML Loading issue in CF 5 Answers

What is the difference between CSS 3 Media query and px-resposive-design components 1 Answer

GE Monogram
  • Legal
  • Cookies
  • Forum Terms
  • Contact Us
  • Copyright © 2017 General Electric Company. All rights reserved.


Enterprise
Social Q&A

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Create an article
  • Submit your feedback or feature request
  • Categories
  • Questions
  • Predix | Updates
    • Pricing
    • Product
  • Deloitte - Private
  • How-To
  • Accenture-Private
  • Explore
  • Topics
  • Questions
  • Articles
  • Feedback or Feature Requests