1. Home
  2. Forum
  3. Blazor
  4. individual styling on different Dialogs?

individual styling on different Dialogs?

I've read this: https://blazor.syncfusion.com/documentation/dialog/style/ which make sense, but what if I have multiple dialogs on a page, say one for alerts and another for a form.  These will be styled completely different.  I need individual styling for each.  If I use the directions in the link, it will apply to both of these boxes, I need to target each on individually with custom classes.

Mike

3 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team August 4, 2020 11:31 AM UTC

Hi Michael,

Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can apply different styles for two SfDialogs in the page. Need to set different ID for each dialog and based on the ID apply the corresponding styles for the particular SfDialog. Refer to the below code blocks for reference.

 
 
<SfDialog ID=”FirstDialog” /> 
 
<SfDialog ID=”SecondDialog” /> 
 
<style> 
  /*First Dialog Styles*/ 
  #FirstDialog.e-dialog .e-dlg-header { 
    color: green; 
    font-size: 20px; 
    font-weight: normal; 
  } 
 
  /*Second Dialog styles*/ 
  #SecondDialog.e-dialog .e-dlg-header { 
    color: green; 
    font-size: 20px; 
    font-weight: normal; 
  } 
</style> 
 
Please let us know if you face any difficulties ? 
 
Regards, 
Indrajith 


Marked as answer
ML Michael Lambert August 4, 2020 06:17 PM UTC

That will work, but what I really have is several 'alert' dialogs, along with several 'info' dialogs and many 'form' dialog throughout the application.  I would prefer just to style each group and then just assign that class to the appropriate dialogs without having to give each an ID then add that ID to the CSS class.  Just one extra step;) It will work though.  Thanks.

IS Indrajith Srinivasan Syncfusion Team August 5, 2020 08:35 AM UTC

Hi Michael,

Thanks for the update,  
  
Yes, you can also apply different styles for a class and add the class to the corresponding SfDialogs in the page. You can use the CssClass property to set the class for the SfDialog. Refer to the below code blocks for reference.
  
  
<SfDialog CssClass="DialogStyle1" />  
  
<SfDialog CssClass="DialogStyle2" />  
  
<style>  
  /*First Dialog Styles*/  
  .DialogStyle1.e-dialog .e-dlg-header {  
    color: green;  
    font-size: 20px;  
    font-weight: normal;  
  }  
  
  /*Second Dialog styles*/  
  .DialogStyle2.e-dialog .e-dlg-header {  
    color: red;  
    font-size: 20px;  
    font-weight: normal;  
  }  
</style>  
 
  
You can use any of the two suggested ways to achieve your requirement. 
 
Regards,  
Indrajith  


Loader.
Up arrow icon