CODEWITHSUNDEEP
selectmaterializefireworks
Kurtix
Kurtix

Reputation: 3

MaterializeCSS - Select native for IOS & Android

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

Upvotes: 0

Views: 1426

Answers (3)

Ignas Damunskis
Ignas Damunskis

Reputation: 1504

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

Upvotes: 1

gepex
gepex

Reputation: 197

Solution here

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

Upvotes: 0

Sean Doherty
Sean Doherty

Reputation: 2378

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

Upvotes: 2

Related Questions