What is the method for adjusting the position of materialize CSS select options?

Question

What is the method for adjusting the position of materialize CSS select options?

https://i.stack.imgur.com/b9p9T.png

One issue arises when I open the Materialize CSS select, as the options end up covering the input. Ideally, I prefer the options to appear underneath 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>

html css select materialize

Answer 1

Answer №1

I have found a solution to your query using the CSS selector and property .dropdown-content {top: -50px}.

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

Answer 2

I have found a solution to your query using the CSS selector and property .dropdown-content {top: -50px}.

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

What is the method for adjusting the position of materialize CSS select options?

Answer №1

Similar questions

Having a tough time navigating the Bootstrap upgrade from 2.x to 3.x - now my design is all out of whack

JavaScript error message stating that the setAttribute function is null

The inclusion of a content editable feature within a carousel is leading to unexpected event propagation

Tips for troubleshooting grid display issues in Internet Explorer

Display HTML instead of text in print mode

Is there an easy method to compare the CSS styles of a specific section in HTML?

How can I align the CSS Horizontal Menu directly under the parent menu instead of its current incorrect x-position?

I am interested in creating a table that can toggle between show/hide mode with a plus/minus feature

Arranging input elements horizontally

Dynamic presentation created with Serif software

Can someone help me uncover the previous URL for login using just JavaScript? I've tried using document.referrer but it's not giving me the

Ways to display JSON in a structured format on an HTML page

Setting the opacity of an image will also make the absolute div transparent

What is the best way to display the letter X (Clear) in the Chrome INPUT field with the type

Template for PHP website including code

"Select2 dropdown fails to function properly upon returning to the page using the browser's

Troubleshooting: Image Not Displaying in Twitter Bootstrap Theme

JavaScript is restricted from being accessed beyond the confines of the ui-view element

Utilize PHP SVG images to trigger internal JavaScript code through the <img> tag

The title in my div class doesn't seem to be properly centered, even though I have set the margin to auto. What steps can I take to correct this issue?