The Stylish Choice: Materialize CSS Dropdown Selector

I am currently integrating Materialize CSS into my application and have used media queries to ensure that the layout is responsive. However, I am facing an issue with a select dropdown element. It works fine on laptops but does not allow for selecting any option on tablet and mobile views. Can anyone provide assistance with this?

<div class="input-field col s12 newid m6 l6">
   <select>
           <option value="" disabled selected>All</option> 
           <option value="1">Option 1</option>
           <option value="2">Option 2</option> 
           <option value="3">Option 3</option> 
  </select>
  <label>Data</label> 


@media screen and (max-width: 320px) { 
  .newid { width: 96%!important;
           margin-top: 8%!important;
           margin-left: 0%!important; 
         }
 }
javascriptjqueryhtmlcssmaterialize

Answer №1

It appears that the initialization for the select element in your JavaScript code is missing. Here is a suggestion on how to fix it using Materialize CSS.

$(document).ready(function(){
    $('select').formSelect();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


<div class="container">
<h5>Materialize Select Option</h5>

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

Answer №2

Are you making sure to properly set up the dropdown menu in your JavaScript code? It's important to initialize many of the components provided by Materialize CSS to ensure they work correctly on your website.

Your code should resemble something like this:

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

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

CSS Dropdown Menu Malfunctioning

I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciate ...

csshtmldrop-down-menu

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

I have elements with names like kra[0][category], kra[1][category], and so on. However, I am facing difficulties in selecting these elements by name. Here is my jQuery code: $("[name=kra[0][category]]").prop("disabled", true); ...

javascriptjquery

Transferring data from JavaScript to ASP.NET (via AJAX)

I'm trying to figure out how to pass variables from JavaScript to a textbox. I have a variable in JavaScript but I am unsure how to transfer it to the textbox. I have heard that using AJAX makes it easy, but I don't know how to implement it. I th ...

c#javascriptasp.netajaxfunction

When setting a value through the DOM, the input's value bound with ngModel in Angular does not get updated

Trying to upload a file to calculate its hash and display it in an input box. If done correctly, the value should show in the form, but when submitting the form, the value does not get sent. Only adding a blank space by clicking on the input field works: ...

javascriptangularangular-ngmodel

The best way to avoid routing before certain async data in the Vuex store has finished loading

I am facing a challenge in my application where I require certain data to be loaded into the VueX store before routing can commence, such as user sessions. An example scenario that showcases a race condition is as follows: // Defined routes { name: &ap ...

javascriptvue.jsvue-routervuexrace-condition

Using AngularJS to implement ngView within a custom directive

I've been attempting to implement ng-view within a custom directive, but it doesn't seem to be functioning properly and I'm not receiving any console errors. Here's the code for my directive: (function() { 'use strict'; ...

javascriptangularjsangularjs-directiveng-view

Differences between Tags and Elements in HTML5

Could someone provide a detailed explanation of the distinctions between tags and elements in HTML5? I am curious about this topic because I have noticed a lot of confusion regarding the terminology online, with the terms being used interchangeably even o ...

htmltags

What is the hostname that npm install directs to?

My task is to set up multiple Node.js packages using npm on a standalone server that does not have direct internet access. I am able to specify an IP Address and port for access. When executing 'npm install' from the command line, where can I f ...

javascriptnode.jsnpm

Utilize jQuery to choose a specific tab

I have implemented a jquery tab in my UI. I want to have the second tab selected when the page loads, instead of defaulting to the tab with the "Active" class. Here is my HTML tab code: <div class="typo"> <div class="container-fluid"> ...

javascriptjqueryhtml

ValueError: Unable to perform slicing operation on this data

When attempting a query in nodejs, I encounter this error: [2017-08-19 19:06:55.946] [ERROR] error - TypeError: val.slice is not a function at escapeString (/var/www/Bot/node_modules/sqlstring/lib/SqlString.js:183:23) at Object.escape (/var/www/Bo ...

javascriptmysqlnode.js

Why is my <div> unable to recognize my <p> as part of its content?

When I tried to display an image, h3, and p inside a div tag, only the image and h3 showed up within the div. Adding a background-color helped me realize that my p element was actually outside of the div. Below is the code in question: <div class="m ...

html

Conceal Choices During Search using jQuery Select2

I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature. My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to ...

jquerycssjquery-select2

Placing the input-group-addon above the text-input for better positioning

Feeling overwhelmed trying to finalize a simple form due to CSS issues? Check out this image for a visual of the problem: https://i.stack.imgur.com/PgCmN.jpg The label is slightly off to the left, and the button appears larger than the input field. The i ...

htmlcsstwitter-bootstrap-3

Tips for using the $each() function within a jquery append to retrieve object-based conditions for parameters

I encountered an issue while trying to include a condition in my endpoint, and I have recently started using jQuery for this purpose. Here is the code snippet from my Laravel view: <tbody id="tbody"> @foreach ($modul as $m) <tr> ...

javascriptjqueryajaxlaravel

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

phphtmlforms

Secure access to an API using a certificate within a Vue.js application running on localhost

My vue.js app is built using vue-cli. The application is hosted at dev.example.com and the REST API can be found at dev.example.com/api/v1/. The backend has added an SSL certificate for security on the development environment. However, when I try to make a ...

javascripthtmlvue.jssslvue-cli

Ways to incorporate file upload feature into the WooCommerce payment process

Adding a file upload field on the WooCommerce checkout page is not supported natively due to security reasons. I am in need of a way to incorporate a file upload field so that customers can provide a document to be attached to their order for future refere ...

phpjqueryajaxwoocommercefile-upload

What is the best way to display JSON response as code instead of a string in AngularJS?

When retrieving my article from the database as a JSON object, I encounter an issue with the body content. The HTML codes in the body are displayed as strings within double quotation marks by AngularJS. How can I resolve this? Angular controller snippet: ...

javascripthtmlangularjsjsonstring

Guide to crafting an effective XHR request using AJAX

Here's a snippet of my basic web page: <!DOCTYPE html> <html> <head> </head> <body onload="start()"> </body> </html> Below is the XMLHttpRequest function I've implemented: function start(){ / ...

javascriptxmlajax

Tips for identifying incognito mode and launching a fresh tab within an already open incognito window

I may not be a professional developer, but I created a Chrome extension app. You can check it out here: Link to Chrome Extension This app currently adds a context menu and opens a new tab in Chrome. However, one of my users has asked me to make the app wo ...

javascriptjsongoogle-chrome-extension