instance-oom
Bootstrap styling conflicts
Hey there, I am using Tailwind and linking the bootstrap stylesheet in the angular.json interferes with the rest of my styling. Is there a way to link the stylesheet only to the editor so that the editor styling works correctly without having to declare the bootstrap stylesheet globally?
I tried adding the bootstrap styles only to the component where I use the editor, but this does not work.
@zFlxw remove bootstrap style in angular.json and write markdown editor related style in style.scss . like `btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } .btn-group .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .ace_print-margin { display: none !important; }
.md-editor-container { position:relative; height:100%; margin-bottom:15px; border:1px solid rgba(0,0,0,.1) } .md-editor-container.fullscreen { margin:0; position:fixed; border:0; top:0; left:0; width:100%!important; height:100%!important; z-index:99999999 } .md-editor-container.md-editor-resizable:not(.fullscreen) { resize:both; overflow:hidden; display:inline-block; width:100% } .md-editor-container.md-editor-resizable:not(.fullscreen) .md-layout .editor-container { height:calc(100% - 70px) } .md-editor-container.md-editor-resizable:not(.fullscreen) .md-footer { z-index:-1 } .md-editor-container .md-layout { height:100%; display:flex; flex-direction:column } .md-editor-container .md-layout .tool-bar { background-color:#f5f5f5; border-bottom:1px solid rgba(0,0,0,.1) } .md-editor-container .md-layout .tool-bar .btn-group { padding:6px } .md-editor-container .md-layout .tool-bar .btn-group:first-child:before { display:none } .md-editor-container .md-layout .tool-bar .btn-group:before { content:" "; background-color:#a9a9a9; width:1px; height:20px; left:0; top:12px; position:absolute } .md-editor-container .md-layout .tool-bar .btn-group.hide-split:before { display:none } .md-editor-container .md-layout .tool-bar .btn { margin-bottom:0 } .md-editor-container .md-layout .editor-container { flex:1; display:flex; height:calc(100% - 100px) } .md-editor-container .md-layout .editor-container > div { flex:1 } .md-editor-container .md-layout .editor-container > div .drag-container { display:none } .md-editor-container .md-layout .editor-container > div.dragover { position:relative } .md-editor-container .md-layout .editor-container > div.dragover .drag-container { display:block; position:absolute; inset:0; z-index:10; background-color:#0006; display:flex; align-items:center; justify-content:center; font-size:50px; color:#fff }`
@Rinkal-2024 's response saved me a lot of time.
Remove bootstrap from angular.json.
Using inspect element of any browser find the class names used in md-editor.
Add css for those class names in src/styles.css.
Make sure this src/styles.css is the last styles imported in angular.json
