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):
In my widget, tabs render as expected, but the panels do not:
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:
Has anyone experienced this? I've been trying to find a solution online without any luck.
I don't think it's a CSS conflict. I believe it to be a javascript conflict.
The reason why I believe this is because if you implement MDL outside of the ServiceNow Service Portal there are extra things that happen dynamically to create the MDL style and that's not happening in Service Portal.
1) When the checkbox is rendered there are extra span elements that are supposed to be created for the MDL style checkbox as well as an extra class for the label that is supposed to be added but isn't happening.
2) When the checkbox is checked, another class is also supposed to be added to the label but it's not happening either.
3) If I manually add the missing elements the style renders correctly but the checkbox won't function correctly.
Javascript would be the thing that would trigger the above. So this leads me to believe that it's a javascript conflict and not CSS even though no errors show. But no errors showing is not uncommon with AngularJS.
When I use Material Design in Service Portal I usually use AngularJS Material (not to be confused with Angular Material). I haven't ran into an issue yet doing using it.
Thanks ChrisB, very helpful! Our team is actually exploring a bunch of different Material libraries - MDL, AngularJS Material, and MaterializeCSS. I have each of those libraries loaded on separately cloned widgets (widget-form). When I inspect the page and check sources, it looks like all three libraries are loaded on each widget. As a result, a lot of the MaterializeCSS styles are showing through for both my MDL and AngularJS Material widgets.
When you load a dependency into a widget, does it then show up as a source in all your other widgets? Is there a way to separate them? Just trying to get a better understanding on how to handle different dependencies for SP. Thanks!
