We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

CSS Base Classes without extra styling

I was wondering and hoping that there were some basic CSS styles that exist that do not override application content styles.

My app uses Bootstrap5 as a base, but with many changes using variables in SASS and CSS. However, Syncfuson is overriding content by changing things like font families and font-sizes.

For example, in the dialog/modal, I have some content inside the body, however, the CSS for the component overwrites my code and changes font sizes to 14px in the body and 16px in the header and the font-family to Roboto.

This forces a lot of overwrites of Syncfusion classes, which is a lot of research and extra work. 

Is there an option like this? Or do I have to create my own theme (which is a lot of work)?

5 Replies

TB Tony Basallo April 27, 2023 02:17 AM UTC

I wanted to add. Also, if you are going to make a theme based on BS5, it would help a lot if yo made variable names the same.

I just created my own them to try and fix the styling issues and Bootstrap callas fonts:

  • $font-family-sans-serif
  • $font-family-monospace
  • $font-family-base: var(--#{$prefix}font-sans-serif) !default;

But Syncfusion calls the variable  $font-family

Just trying to find the easiest way to integrate Syncfusion in an app that does not need theme support but does need the base classes for the components.

TB Tony Basallo April 28, 2023 01:17 AM UTC

Additionally, I have found that if I do this, I can make the modal operate in a more standards based way:

This ensure that my modal is always centered (even when resizing) and that it has an appropriate width for the screen size.

Using the CssClass property (which is ModalDefault below) I can ensure modal sizes that match the content.

I hope someone chimes in soon to provide some clarity on the intention in the current s

@media (max-width: 799px) {
    .e-dialog.e-lib.e-dlg-modal.e-popup.e-control.ModalDefaults {
        width: 100% !important;
.e-dialog.e-lib.e-dlg-modal.e-popup.e-control.ModalDefaults {
    width: 800px !important;
    top: 25px !important;
    margin: 0 auto;
    left: auto !important;

TB Tony Basallo May 7, 2023 09:38 PM UTC

bump for review

TB Tony Basallo June 17, 2023 03:53 AM UTC

Anyone from support reviewing these comments?

BS Buvana Sathasivam Syncfusion Team June 21, 2023 01:18 PM UTC

Hi Tony,

Thank you for reaching out to us with your query. We understand that you would like to customize the width of the SfDialog component based on different screen sizes.

By default, the SfDialog component is rendered at the center of the target and adjusts its width based on the screen size when the Width property is set as a percentage. If you would like to set the width as a percentage on specific screens and a static width on normal screens, you can achieve this by applying styles according to the code snippet you shared.

In addition, if you would like to set the width for a particular SfDialog component, you can utilize the CssClass property and apply styles specifically to that component.



Buvana S

Live Chat Icon For mobile
Up arrow icon