Bootstrap interfering with Material Design Lite (MDL) style

davilu
Mega Sage

Hi Community, I am trying to load and test out MDL in Service Portal, but can't seem to get the styling to render.   I've created a dependency called "Material Design Lite" and loaded both the JS and CSS files and also included it on load (I do NOT have an angular module name in place):

find_real_file.png

find_real_file.png

In my widget, tabs render as expected, but the panels do not:

find_real_file.png

For a checkbox input, I've put in the MDL classes and it shows up when I inspect the page, but it looks like Bootstrap's styling takes over:

find_real_file.png

Has anyone experienced this?   I've been trying to find a solution online without any luck.  

1 ACCEPTED SOLUTION

In your first screenshot, I notice that the "Include on page load" is checked. Doing this will load the dependency on every page as opposed to just the page the associated widget is on.


View solution in original post

7 REPLIES 7

In your first screenshot, I notice that the "Include on page load" is checked. Doing this will load the dependency on every page as opposed to just the page the associated widget is on.


Yea my bad, that was an old screen shot, I unchecked that after pasting that first image.   The Include on Page Load for all of these dependencies are unchecked, but all the libraries are still showing up in the Sources when inspecting the page...


Whoa super weird.   I definitely remember unchecking that box after realizing that it was checked, but SN won't let me uncheck it lol.   Just tried unchecking and saving, but it keeps coming back.   I'll delete and reupload the dependency without the box checked and report back.   thanks!