Material Design Lite Textbox Conflicts with Devcards

[skbach]

The material design lite textbox (https://getmdl.io/components/index.html#textfields-section) isn't working correctly with devcards.

To reproduce: add the following to the head of cards.html

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-blue.min.css" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>

Then, in a simple defcard, return this:

(sab/html 
  [:div {:class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label"}
    [:input {:class "mdl-textfield__input", :type "text", :id "addr1"}]
      [:label {:class "mdl-textfield__label", :for "addr1"} "Address line 1"]])

The textbox will not have any of the mdl sytling / behavior attached.

I've tested in Rum and it works as expected. I also tested in Om with Sablono, and that also works. So I am assuming there is some conflict with the devcards css?

[yannvanhalewyn]

I'd like to butt in on this, I also had a similar issue. Somewhere in the documentation (can't find it right now) is stated that you can override devcards stylesheets.

1. Figure out which devcards stylesheet is the origin of the conflict. (I usually just inspect the dom and delete style tags until my card looks adequate again
2. Add a style tag with the matching id to your cards.html. Devcards will not attach the style tag to the dom if an existing one exists by that id.

You can also copy over the entire conflicting stylesheet, include it with the same id in cards.html and manually remove the style statements that conflict.

Hope this helped even though this issue was submitted a while ago!