Importing bootstrap overriding default CSS #8719
Replies: 4 comments 4 replies
-
Hi @Laharikota07. The issue you face is an effect of how tables are styled using CSS in general and not having anything with bootstrap (since you don't have the table class on the table element usually required by Bootstrap). The color is applied to cells as well, which negates the border style set on the table element. You can play around with this yourself. The solution is to make your own To use Bootstrap with TinyMCE, you can explore the ideas in this example, on how to force classes on elements. — Fredrik, Product Manager |
Beta Was this translation helpful? Give feedback.
-
Hi Fredrik, Given example by you is also not working. I am trying to add border style to the table by using Advance property, but any border is not getting applied. |
Beta Was this translation helpful? Give feedback.
-
Hi @parulshrivastava455. Table styling has a 1:1 mapping with the underlying inline styles. So if you add a border color to a table tow the styles are applied to the |
Beta Was this translation helpful? Give feedback.
-
I just want to add that we recognize styling tables are not very user friendly but any solution inevitable requires us to make a very opinionated implementation which many developers do not like either. |
Beta Was this translation helpful? Give feedback.
-
Table borders, cell borders, and other default styles of Tiny MCE are overridden when importing bootstrap using the content_css attribute.
Steps to reproduce issue:
1. Go to tiny MCE editor and add table.
2. Then try to add border style to the table using table properties and style wont get applied for display.
BootStrap CSS Import
Original Table
Source Code View after adding the Border Style & Border Color
Expected behavior:
1. Display in Editor as well as Preview should take into account the Styles set in Editor via table properties.
Actual Behaviour:
Versions using:
1. Angular Packages : 15.X
3. "@ng-bootstrap/ng-bootstrap": "^13.1.1"
4. bootsrap: ^5.1.3
5. "tinymce": "^6.3.2"
6. "@tinymce/tinymce-angular": "^7.0.0"
Beta Was this translation helpful? Give feedback.
All reactions