search

FezVrasta / dropdown.js

A dropdown plugin that does what you expect. (NEEDS MAINTAINER)
MIT License
188 stars 93 forks source link

input field set to readonly conflicting with BMD classes #69

Open marknl opened 7 years ago

marknl commented 7 years ago

I've tried to reconstruct the issue in a codepen, but it doesn't seem to work at all there. https://codepen.io/marknl/pen/rYVGmQ

Here's a screenshot: https://imgur.com/a/n6rNy

When you define a select object, dropdownjs creates a div with an input element op top of the original select. this input element is given the attribute "readonly". This introduces a visual issue when using Bootstrap Material Design v4 (master) as well. The select is shown greyed out in css class:

.custom-file-control:disabled, .form-control:disabled, .form-control[readonly], [readonly].custom-file-control {
    background-color: #e9ecef;
    opacity: 1;
}

It's the input that makes it grey, and I agree that it should be readonly to prevent typing in the input field, since it should only contain valid select options. You can of course, overrule the background-color in a css class, but this readonly also has consequences for more css styles bdm applies, like the rippled line underneath the select. It now stays grey instead of green-ish default.

FezVrasta commented 7 years ago

If it can't be reproduced in the codepen it means it's some of your custom CSS that is generating the error.

marknl commented 7 years ago

I can't get the dropdown to work at all in the codepen is what I meant. Turns out you cannot include JS from raw github, since it returns text/plain .. strict MIME checking.

Anyway, I have it working in the same codepen right now, and the issues still stands. https://codepen.io/marknl/pen/rYVGmQ

FezVrasta commented 7 years ago

Thanks, it should be enough to set background-color: transparent in the CSS of dropdown.js.

Feel free to send a PR to fix it.

marknl commented 7 years ago

I tried that, that indeed fixes the background-color, but then the ripple color of the line underneath the input element is not in the right color (teal). That's because of this css class:

.custom-file-control:read-only, .form-control:read-only {
    background-image: linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
}

.form-control:read-only is making it grey.