Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
arsv M
185
How to apply different CSS(styling) for multiple igx-dialog in same component
posted

In my page I have multiple igx-dialog compoenents. 

For example

 <igx-dialog #dialog1   leftButtonLabel="Cancel"   rightButtonLabel="OK"  >
 <igx-dialog #dialog2   leftButtonLabel="Cancel"    rightButtonLabel="SAVE"  >
For dialog1 and dialog2 I wanted to have different styling i.e., apply different font, different back ground color - different CSS
The below CSS is applying to all dialog boxes which I don't want.How can I differentiate?
(Tried adding  id and class to igx-dialog tag didn't work)
.igx-dialog__window {
position: relative;
min-width: 17.5rem;
border-radius: 4px;
background: #fff;

}

Parents
No Data
Reply
  • 1560
    Offline posted

    Hello,


    I have been looking into your question and my suggestion in order to apply different styles to the dialogs is to use themes that extend the igx-dialog-theme. More about IgxDialog Styling could be found here.


    Also, a list of all parameters included into the dialog theme could be found here.


    Additionally, I have prepared a small sample with two dialogs that are styled differently and it could be found here.


    Please test it on your side and let me know if I may be of any further assistance.


    Sincerely,
    Teodosia Hristodorova
    Associate Software Developer

Children