Search code examples
htmlcssselectmaterialize

How to change materialize css select option position?

enter image description here

the problem is when I open the Materialize CSS select the options cover the input. and I want options to be under the input.

<div class="input-field  ">
                                    <select>
                                        <option value="" disabled selected style="margin-top: 43px">Choose your option</option>
                                        <option value="1">Option 1</option>
                                        <option value="2">Option 2</option>
                                        <option value="3">Option 3</option>
                                    </select>
                                    <label>Sort By</label>
                                </div>
Solution

  • I've prepared a solution to your question, if that's what you mean. I achieved this with the .dropdown-content {top: -50px} CSS selector and property.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        align-items: center;
        display: flex;
        background: lightskyblue;
      }

      .container {
          width: 50%;
      }

      .dropdown-content {
          top: -50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="card-panel">
        <div class="input-field">
          <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>Sort By</label>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var select = document.querySelectorAll("select");
        M.FormSelect.init(select);
      });
    </script>
  </body>
</html>