-1
\$\begingroup\$

I am working on a custom bot UI with Microsoft Bot Framework. I found a template to create a floating widget with Materialize, however, it was for the "embed" version of webchat UI. My version uses some Divs to add additional elements (header, transcript button). These elements were in conflict with the Materialize CSS.

Through a lot of trial an error, I was able to override the settings that were causing issues. In addition to figuring out the right class and div names, I had to use !important to get my settings to stick. And the problem is actually worse than that. When I imported the Materialize CSS onto the page I ultimately will deploy the chatbot on to, it caused the same kind of formatting issues on that webpage itself.

So ultimately, my question is this: Is there a way to force the Materialize CSS to be subservient to any other CSS? Or is there a way to pull out just the CSS for the elements I need for my chatbot UI, hopefully eliminating the conflicts? In addition to fixes for my current code, and suggestions for other frameworks to use to accomplish the same sort of thing (floating button that expands into a floating chat window) would be appreciated as well.

The key point is that I need to make sure that I have the right CSS for the button/floating chat widget to work without overriding the existing CSS for my chatbot UI or the webpage it's going on.

Here is the CSS:

        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!--There is a conflict with this css specification and my own chat specification-->
        <!--Import materialize.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

        <style>
        html, body {
            height: 100%;
        }

        input {
            margin: 0 !important;
            border: 0 !important;
            padding: 0 !important;
            height: 100% !important;
        }
        input:focus {
            border-bottom: none !important;
            box-shadow: none !important;
        }

        form {
            margin: 0 !important;
            border: 0 !important; 
        }

        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
        }

        #chatbotTitle {
            display: flex;
            align-items: center;
            height: 40px;
            width: 100%;
            background-color: #0067CC;
            color: #FFFFFF;
            font-family: Calibri, Helvetica Neue, Arial, sans-serif;
            justify-content: space-between;
            padding-left: 10px;

        }

        #webchat {
            height: calc(100% - 40px);
            width: 100%;
        }

        .button {
            display: flex;
            background-color: white;
            border: 1px solid #767676;
            color: #0067CC;
            text-align: center;
            align-items: center;
            margin: 15px;
            height: 25px;
            width: 100px;
        }

        .button:hover {
            border-color: #444444;
        }

        .button:active {
            background-color: #CCCCCC;
        }

        b {
            font-size: 1.25em !important;
        }
        @media screen and (max-width: 600px) {
            b {
                font-size: 1.2em !important;
            }

            .button {
                font-size: 0.8em;
                font-weight: bold;
            }

            #webchatContainer {
                width: calc(100vw - 2em) !important;
                height: calc(85vh - 2em) !important;
                max-width: calc(100vw - 2em) !important;
                max-height: calc(85vh - 2em) !important;
                top: 1em !important;
            }
        }

        </style>

    </head>
    <body>
        <img src="myEatonStatic.png"></img>
        <a id="chatButton" class="btn-large waves-effect waves-light" style="position: fixed;z-index: 10000;top: 8em;right: 0em;background:#0067cc; padding: 0 1em 0 1em;">
            <i class="material-icons">chat</i>
        </a>
        <div id="webchatContainer" class="z-depth-1 scale-transition scale-out" style="background:white; border: 1px solid #0078d7;position: fixed;z-index: 5000;bottom: 6em;right: 1em;width: 400px; max-width: calc(100% - 1em);height: 78vh;min-height: 400px;max-height: calc(100% - 6em)">
        <div id="chatbotTitle"><b>OEM CSC Support Bot</b><button class="button" id="transcriptButton">Get Transcript</button></div>
        <div id="webchat" role="main"></div>
        </div>
\$\endgroup\$
3
  • \$\begingroup\$ "How-to"s are off topic with one possible exception: This code works as intended. But I harbour misgivings a, b, and possibly c. How to cope? \$\endgroup\$
    – greybeard
    Commented May 1, 2020 at 5:44
  • 1
    \$\begingroup\$ Sure, I'll see if I can modify the title. The code DOES work, but I definitely have misgivings about how it affects the parent website! \$\endgroup\$ Commented May 1, 2020 at 12:45
  • \$\begingroup\$ Can you tell us more about those conflicts and how your code works despite them? \$\endgroup\$
    – Mast
    Commented May 1, 2020 at 20:35

1 Answer 1

1
\$\begingroup\$

Let us keep this brief:

Is there a way to force the Materialize CSS to be subservient to any other CSS?

Nope, sorry.

CSS does not work that way. With CSS, you style elements with increasingly specific selectors, but the least specific styles will always apply, no matter what. You can only overwrite them.

A quick ctrl+f in the Materialzed stylesheet tells me it specifies a style for button very non-specifically, so it will definitely interfere with any button on any page using it.

Your two options now are:

  • Make your selectors more specific.
  • Hack your way through it with !important (assigning the highest styling specificity thus overwriting everything), or through a hacky use of the all: unset property.

The last option is not really an option, please do not do that ):

\$\endgroup\$
5
  • \$\begingroup\$ Thanks. The biggest issue isn't my UI, it's the corporate page we're deploying it to. And we aren't going to be able to restyle the entire corporate page just to support this UI. So it seems perhaps that finding just the elements that I need for my UI styling and pulling them out (i.e. defining them in my own stylesheet) might be the way to go? I can definitely make my styles more specific, but just importing the Materialize CSS without any of my bot UI code messes up the corporate site. \$\endgroup\$ Commented May 1, 2020 at 12:43
  • 1
    \$\begingroup\$ @billoverton You might be able to screw around with shadow-dom styling (similar to <style scoped>), which is a bit of a hack if you're not using it for custom elements, or find another way to ensure the CSS doesn't leak without altering your CSS. My experience is that css libraries aren't worth the hassle. Why use google's styleguide for your company's website anyways? ;) \$\endgroup\$
    – Maanlamp
    Commented May 1, 2020 at 13:17
  • \$\begingroup\$ I'm not a web developer so I needed a template to implement a floating widget. I'm sure I could find a different way, but the Materialize classes take care of the floating button and the show/hide of the chat window. I haven't found any other good templates to do this. I made the widget work with it before finding out Materialize messed up the corporate site too... May sound strange, but we don't have any corporate resources to do this UI design for us. I'm having one of my peers experiment with Angular but we've had no progress on that so far. Thanks for the additional suggestion! \$\endgroup\$ Commented May 1, 2020 at 13:52
  • \$\begingroup\$ Though my question was downvoted and closed, your suggestion and link to using specificity was just what I needed. Still have some changes to make, but I've eliminated a vast majority of the interference. \$\endgroup\$ Commented May 5, 2020 at 20:25
  • 1
    \$\begingroup\$ @billoverton That's great to hear -- glad to have sent you on the right track. Stackoverflow has always been so incredibly unwelcoming to people asking questions so I am happy I could help you before it was closed. \$\endgroup\$
    – Maanlamp
    Commented May 6, 2020 at 14:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.