0

Is it possible to make all select dropdowns native for IOS and Android ?

because currently the selection under IOS 13 with materializecss does not work properly.

Cordially

Kurtix
  • 3
  • 3

3 Answers3

1

1. Use .browser-default

You can add the class browser-default to get the browser default.

https://materializecss.com/select.html

<select class="browser-default">
     <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>

2. There is a temporary workaround

Serving the below patched select.js file after materialize.js is working for most users.

https://github.com/Dogfalo/materialize/blob/v1-dev/js/select.js

Sean Doherty
  • 2,273
  • 1
  • 13
  • 20
  • is it possible to mix the browser-default parameter with the CSS style of the select to materialize ? – Kurtix Feb 21 '20 at 01:44
  • I think it is difficult/impossible to style the browser default dropdown consistently across browsers. https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css Materialize actually hides the native element, and creates it's own element which can be styled. Note, if you serve the js file above separately - after materialize.js and before your custom/initialisation script, you'll get the styles you want. – Sean Doherty Feb 21 '20 at 08:02
  • the patch never worked for me :(, I dont know why, I added it after materialize js file – gepex Aug 29 '20 at 06:37
1

The issue is caused by the transform animation of the dropdown container.

I created a package that fixes this and other common known materialize-css issues materialize-css-helper. The fix in a package is similar to what @gepex suggested, but also adds passive listener option to not decrease scrolling performance.

Also you could try just removing animation from dropdown container:

.dropdown-content {
    transform: none !important;
}
Ignas Damunskis
  • 1,515
  • 1
  • 17
  • 44
0

Solution here

$(document).click(function(){
    $('li[id^="select-options"]').on('touchend', function (e) {
        e.stopPropagation();
    });
});
gepex
  • 197
  • 1
  • 2
  • 14