Materialize CSS dropdown select arrow out of position

Here is a snapshot of the Materialize CSS, which can be viewed at:

However, I am encountering an issue where the dropdown arrow appears below the list instead of on the side.

I am currently using Django 3. How can I resolve this?

https://i.sstatic.net/dGh8h.png

Below is the HTML code 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>
cssdjangomaterialize

Answer №1

It has been noticed that there are conflicting versions of materialize, specifically both 1.0.0 and 0.97.3 being used simultaneously:

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

To rectify this issue, it is recommended to stick with only the 1.0.0 version for both the .css and .js files.

The following snippet demonstrates how to implement the provided HTML code correctly:

<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/></script>



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

Answer №2

After reviewing your code and the accepted answer, a few issues were identified:

1) JavaScript was placed in the head section instead of at the end, just before the closing body tag.

2) The order of materialize.js inclusion was incorrect, causing unintended behavior. It should be loaded after being utilized in your function within the head section to avoid conflicts.

3) jQuery was served but not used in the code provided. If required, it should be loaded first, followed by materialize.js, and then your custom JS code for initializing functions.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: Unable to locate URL pattern: /upload/ while redirecting

While running the code, an error is encountered as follows NoReverseMatch at /upload/ Reverse for 'compare' with keyword arguments '{u'uploaded_file_url2': '/media/SAMPLE1.xlsx', u'uploaded_file_url': '/m ...

pythondjango

Chrome compatibility problem with scroll spy feature in Bootstrap 3

Having trouble with scroll spy for boosters using the body method " data-spy="scroll". It seems to be working for some browsers like Edge and Google Chrome, but after multiple attempts, it still doesn't work for me. Even after asking friends to test i ...

javascripthtmlcssgoogle-chrome

Utilizing the p tag to incorporate dynamic data in a single line

I am currently working with two JSON files named contacts and workers. Using the workerId present in the contacts JSON, I have implemented a loop to display workers associated with each contact. The current display looks like this: However, I am facing an ...

cssangular

Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gap ...

cssborderline-numberscss-counter

interaction with leaflet popup information

My aim is to access the content within a leaflet popup. Specifically, I have inserted a form with buttons inside it that I would like to interact with. However, for now, I am simply attempting to add an event to the popup itself. $(".leaflet-popup-content ...

jqueryhtmlcssleafletpopup

How to utilize Bootstrap 4's d-flex to make an element span the entirety of the available space?

Creating this specific design is now achievable with the new bootstrap d-flex feature. Can you guide me on how to craft a section similar to the one depicted in the second image? https://i.sstatic.net/LtTux.png https://i.sstatic.net/RlWvJ.png ...

htmlcssflexboxtwitter-bootstrap-4

problem with the height of the side navigation bar

Currently, I am in the process of creating a back-end system that includes a side navigation bar positioned on the left-hand side. To accomplish this, I have opted to utilize the Bulma CSS framework and integrate it with Laravel. Although I have implemen ...

htmlcss

Preview images in the Image Carousel bullet lineup

I've created an awesome image carousel using HTML and CSS. The carousel includes three bullets at the bottom that display a preview image when hovered over. Currently, there is a transition effect as the picture slides up and down. Is there a way to m ...

htmlcss

What kinds of font file formats are you utilizing?

In numerous projects, I have observed a common practice of using multiple font extensions such as .TTF, .WOFF, and .WOFF2. However, this can result in having multiple files for a single source. Imagine the clutter if one has several sources with different ...

csssass

Customizing the appearance of the 'Submit' button compared to the <a href=""></a> button using CSS

I am experiencing some issues. Even though the CSS code for these two buttons is exactly the same, their appearance is different. I am unable to make the :hover or :active effects work either. My goal is to have the left 'input type="submit' but ...

htmlcssinputform-submitappearance

Unforeseen outcomes arise when toggling expansion in JavaScript

I have a pop-out div at the top of my page that expands and closes on toggle. Also, when I toggle the pop-out div, it changes the top position of another div (a side pop-out menu). The issue is that the side pop-out menu should only appear when clicking ...

javascripthtmlcss

Centering a div vertically within another div

Can you help me insert the flight duration in the middle-left section of each blue line? I've tried some methods but haven't been successful so far. This is the current layout: https://i.sstatic.net/edOfg.png Example on CodePen HTML structure ...

htmlcssless

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11

I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. Howe ...

cssinternet-explorermicrosoft-edge

jQuery code unable to alter the class of a div

Need help with a script on my single page site that adds a "read more" style link to a content area's div. The goal is for the button to change the class of the content area when clicked, showing all of the content. Clicking again should hide the cont ...

javascriptjqueryhtmlcss

Working with Django ForeignKey and through parameter

Apologies for the incorrect title, I attempted to modify it but encountered difficulties. The correct parameter should be 'to' instead of 'through'. The code for the following models is as follows: class DocAide(models.Model): id ...

djangomodel-view-controller

Styling with CSS: Changing the Background Color of Text

Looking for a solution to apply line-height to text without affecting the background color? Check out the code snippet below and share your ideas if you have any. Thanks! .nb-semnox-impact-grid { display: block; font-size: 6 ...

htmlcss

Do styled components have the capability to perform calculations similar to SCSS?

Using SCSS, I have the power to work wonders with CSS: @for $i from 1 through $total-items { li:nth-child(#{$i}) { animation-delay: .25s * $i; } } I am currently developing a React App that utilizes styled components. Is it possible to achieve th ...

cssreactjssassstyled-components

Discover the method for retrieving the value of a toggle-style checkbox

I am currently working with a toggle switch checkbox and I need to extract its value using JavaScript or jQuery when the state changes. Based on this value, I aim to highlight the text of the label associated with the toggle switch, whether it's opti ...

javascripthtmljquerycsscheckbox

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

javascriptjqueryhtmlcss

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

htmlcssanchor