Search code examples
cssdjangomaterialize

Materialize CSS select dropdown arrow displaced

Below is a screen shot of the materialize css as seen from: https://materializecss.com/select.html

But for some reason, I get the little arrow of the drop down under the list rather than on the side.

I am using Django 3.

How do I fix this?

Screen Shot of the materializecss DropDown

And the following is the HTML of the rendered page:

<html><head>
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>




          <script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
    });
      </script>
</head>
<body class="vsc-initialized">
<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo right">SIW</a>
        <ul id="nav-mobile" class="left hide-on-med-and-down">
            <li><a href="/">Home</a></li>
            <li><a href="/Contact">Contact</a></li>
        </ul>
    </div>
</nav>

    <div class="section">
    <div class="row">
        <form class="col s12">


            <div class="input-field col s4">
                <div class="select-wrapper"><input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-07dbac11-476d-4358-8e69-a8d561e0df80"><ul id="select-options-07dbac11-476d-4358-8e69-a8d561e0df80" class="dropdown-content select-dropdown" tabindex="0" style=""><li class="disabled selected" id="select-options-07dbac11-476d-4358-8e69-a8d561e0df800" tabindex="0"><span>Choose your option</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df801" tabindex="0"><span>Option 1</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df802" tabindex="0"><span>Option 2</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df803" tabindex="0"><span>Option 3</span></li></ul><svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><select tabindex="-1">
                    <option value="" disabled="" selected="">Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select></div>
                <label>Materialize Select</label>
            </div>


        </form>
    </div>
    </div>



<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>



<div class="hiddendiv common"></div></body></html>
Solution

  • You're using multiple conflicting versions of materialize both 1.0.0 and 0.97.3:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    Select only the 1.0.0 version on both the .css and .js files, for it to work.

    Below is a snippet using the HTML code you provided.

    <html><head>
      <meta name="viewport" content="width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      </script>




          <script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
    });
      </script>
</head>
<body class="vsc-initialized">
<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo right">SIW</a>
        <ul id="nav-mobile" class="left hide-on-med-and-down">
            <li><a href="/">Home</a></li>
            <li><a href="/Contact">Contact</a></li>
        </ul>
    </div>
</nav>

    <div class="section">
    <div class="row">
        <form class="col s12">


            <div class="input-field col s4">
                <div class="select-wrapper"><input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-07dbac11-476d-4358-8e69-a8d561e0df80"><ul id="select-options-07dbac11-476d-4358-8e69-a8d561e0df80" class="dropdown-content select-dropdown" tabindex="0" style=""><li class="disabled selected" id="select-options-07dbac11-476d-4358-8e69-a8d561e0df800" tabindex="0"><span>Choose your option</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df801" tabindex="0"><span>Option 1</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df802" tabindex="0"><span>Option 2</span></li><li id="select-options-07dbac11-476d-4358-8e69-a8d561e0df803" tabindex="0"><span>Option 3</span></li></ul><svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><select tabindex="-1">
                    <option value="" disabled="" selected="">Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select></div>
                <label>Materialize Select</label>
            </div>


        </form>
    </div>
    </div>



<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>



<div class="hiddendiv common"></div></body></html>