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)?
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:
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.
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;
}
bump for review
Anyone from support reviewing these comments?
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.
Regards,
Buvana S