Materialize: .picker css selector conflicts with the google picker selector

[duizendstra]

The Google picker does not work together with materialize css. They share the same css selector .picker. There is also a issue for the pickadate.js library.

It would be great if the selector could be changed to a Materializecss specific name.

[Dogfalo]

We use the pickadate js library so that is why they are the same, this could easily be changed for yourself, that way it doesn't break other people's existing code.

[duizendstra]

Hi Alvin,

Maybe I do not understand, but the documentation states "We use a modified version of pickadate.js to create a materialized date picker"

I do understand current code should not be broken, but isn't that why there are Alpha versions?

Why not bite the bullet, modify pickadate.js (it is mentioned as an issue there alsoissue) and create a unique namespace for the materializecss picker?

I can't use materializecss out of the box now, partly because Google claimed the picker namespace, but materializecss is doing the same. That is IMHO not ok and materializecss is in Alpha, we can expect changes that are not backwards compatible?

[jokesterfr]

@Dogfalo you don't really address the namespace issue here. Both materialize and Google APIs teams can say "it's not my fault", but does not solve the issue either ;)
Especially when all these dependencies are managed by an overkill combo of grunt/bower stuff (thank you yeoman), end-developers can hardly fix without making an exception to the dependency policy.

As a workaround I added this snippet to my main css file, interpreted after materialize.css :

.picker {
  font-size: initial;
  text-align: initial;
  line-height: initial;
  color: initial;
  position: initial;
  z-index: initial;
  -webkit-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

And the Google picker box is now appearing as it should.

[iamazik]

I was struggling from yesterday and now I see it's a conflict. Wow. However, thank you so much @jokesterfr

[prachi708]

thank you @jokesterfr I was trying to overcome this conflict from 2 days. Now it solve my issue.

[Astrea123]

This is not worked for me ,I have added this code in my main.css file but stile meteor use materialize.css file.
Is there any way to force meteor to css code written by user