Menu
We have a single page app built with angular that contains various features within.
One of these features is a drag and drop interface for snippets of code. Each of these snippets has its own styles that are styled separately from the rest of the admin panel.
The main part of the app is styled using a bootstrap theme but the drag and drop snippets are not and so when navigating into the drag and drop section the snippets inherit some of the bootstrap styles.
This causes a variety of problems styling wise and am looking for a solution ideally without using iframes or having to override bootstrap styles. Ideally we would unload the bootstrap and then only load in the new styles, or have the new content not inherit styles.
Is there anyway to achieve this without reloading the app or using an iframe? Switching stylesheet or injecting new styles into the page and removing others?
938
One can obtain any feature by making multiple stylesheets into the HTML code and enabling one at a time. A CSS file is included into the HTML in the <head> tag using the <link> tag. The “href” attribute specifies the file location of the CSS file.
There is one minor annoyance with this stylesheet switcher: there’s generally a flash of the “default” CSS when the user loads the page. That’s because the script waits until the document is “ready” before switching the link’s href.
The implementation can be done using any of the following methods. Method 1: When you want to make a switch or toggle button, to toggle the CSS. It switches between the values depending upon the currently active value. // elements. // to change the css sheet.
Thank you. Single part app pages provide a capability to host SharePoint Framework web parts or Microsoft Teams applications in SharePoint Online with a locked layout. End users cannot modify or configure the page that is using the Single Part App Page layout. App pages have following characteristics:
I can think of two options:
Remove the stylesheet element
Before displaying your problematic content, remove the LINK element (worth keeping it as a reference for later.
var element = document.querySelector('link[href~="bootstrap.css"]');
document.removeChild(element);
When you want to return the Bootstrap styling you can just re-append it.
document.head.appendChild(bootstrapLinkElement);
Override the Bootstrap CSS rules
Create a set of rules that override and/or reset the Bootstrap rules. You can nest them under a parent selector (e.g. .no-bootstrap) so they will affect only specific elements.
To make things easier you can get Bootstraps precompiled source code (LESS or SASS) and edit it to incorporate an override stylesheet.
Edit: fixed typo
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
