Reputation: 23

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?

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>

Upvotes: 1

Answers (2)

Sean Doherty

Reputation: 2378

There were a few things wrong with your code, and the accepted answer:

1) You had JS in the head. JS should go at the end, before the closing body tag.

2) The answer had materialize.js at the end - after it is used in your function in the head. This was causing the double carets.

3) You are serving jQuery but never using it. If you do need it, it should be served first, followed by materialize.js, and then your own custom JS (where you run your inits).

<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">



</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 s5">
                <select>
                    <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>
                <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>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
    });
</script>



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

Upvotes: 1

Bernardo Duarte

Reputation: 4264

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>

Upvotes: 1

Materialize CSS select dropdown arrow displaced

Answers (2)

Related Questions