Utilizing MaterializeCSS with ESRI JS 4.4

PaulYoum1 · ‎07-12-2017

I am trying to incorporate MaterializeCSS into my project (http://materializecss.com/). The material design is really nice and makes it easy for me to switch from android to javascript. Unfortunately I'm running into compatibility issues with the ESRI JS api, and materialize which relies on JQuery. It might related to the age old battle of dojo vs jquery, and I'm still new to this, but I was hoping with the release of the JavaScript API 4.X that the api would be easier to incorporate 3rd party libraries.

I've got it partially working, to the point where I can finally load both MaterializeCSS, and the necessary core functionality for a 4.4 map, but it fails in IE with "parentElement" undefined or null". The odd thing is, is if I leave out the Main.css file, it works fine in IE, except for the fact that none of the layers will load.

Also, functionality is perfect in Chrome and Firefox with no breaks. Does anyone have any success with incorporating 3rd party libraries, and hopefully some experience with MaterializeCSS? I'm particularly confused with how leaving out a CSS file will fix/break javascript?

For those not wanting to download the file, here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Materialize Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" media="screen,projection" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<script src="https://js.arcgis.com/4.4/"></script>

   <script src="classList.js"></script>
   <script src="gistfile1.js"></script>

<style>
        #map {
         height: 80vh;
         position: relative;
    }

    #addNewInitiative{
        padding-top: 50px;
    }

    .no-pad {
      padding: 0;
    }

    .container {
      padding: 0;
    }

    .input-field .prefix.invalid.active {
        color: #F44336;
    }

   #LocateButton {
       position: absolute;
       z-index: 9999;
       top: 86px;
       left: 21px;
   }

    .esriPopup.esriPopupHidden {
        display: none;
    }

    .fp-no-easing {
        -webkit-transition: all 0s ease-out !important;
        transition: all 0s ease-out !important;
    }
    </style>
</head>
<body>
    <div id="fullpagenew">
        <div class="section no-pad" data-anchor="Click">
            <div class="slide head">
                <div class="row">
                    <div class="col s6 m6 l6">
                        <a href="#vclick" class="waves-effect waves-light btn blue lighten-1">Click</a>
                    </div>
                    <div class="col s6 m6 l6">
                        <a href="#another/Click" class="waves-effect waves-light btn blue lighten-1">Another Click</a>
                    </div>
                </div>
            </div>
            <div class="slide blue" data-anchor="Another Click">
                <h1>Slide 2</h1>
            </div>
        </div>
        <div class="section" id="addNewInitiative" data-anchor="Click">
            <div class="slide desktop" data-anchor="podatki">
                <div class="container">
                    <form role="form" id="inputFormDesktop">
                        <div class="row">
                            <div class="col l6 s12 item" id="mapCol">
                                <div class="card-panel">
                                    <div id="map">
                                        <div id="LocateButton"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="hide-on-med-and-down">
                            <div class="row">
                                    <div class="file-field input-field col l12 s12">
                                        <div class="btn">
                                            <span>Folder Explorer</span>
                                            <input type="file" multiple>
                                        </div>
                                        <div class="file-path-wrapper">
                                            <input class="file-path validate" type="text">
                                        </div>
                                    </div>
                            </div>
                            <div class="row">
                                    <div class="col l6">
                                        <button type="button" class="btn btn-danger head-btn btn-sm" id="Bot Left">Bot Left</button>
                                    </div>
                                    <div class="col l6">
                                        <button type="button" class="btn btn-success head-btn btn-sm" id="Bot Right">Bot Right</button>
                                    </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
   <script>
var map;
require([
"esri/Map",
"esri/views/MapView",
"dojo/on",
'dojo/dom',
"dojo/cookie",
"dojo/domReady!"
], function (Map, MapView, on, dom, cookie) {

    map = new Map({
        basemap: "streets"
    });

    var view = new MapView({
        container: "map", // Reference to the scene div created in step 5
        map: map, // Reference to the map object created before the scene
        zoom: 12, // Sets the zoom level based on level of detail (LOD)a'
       center: [15, 65]
    });

map.add(annoLayer);

});
</script>
</body>
</html>