Major Problems with Materialize

help
1

Is anybody else having major problems with Materialize? I recently upgraded my packages and now my app is all messed up. I think there were some breaking changes in the most recent version of Materialize.

For example, when I use a modal the modal will appear, but the screen behind it is completely black and the modal overlay won’t go away when I’ve exited out of the modal. Developer tools shows that 10 modal overlays were created when the modal was opened, but only one is removed when I close the modal. All I have done is initialize the modal in the onRendered callback.

2124×1034 87.1 KB
1816×340 184 KB

I’ve started to run into so many problems using the Materialize package that I’m likely never going to use it again… It’s been a nightmare.

If anyone has any idea why I’m having problems I’d appreciate any help you can offer!

2

Look through your loaded packages, you may have the Javscript loaded twice.

On a modal:
both copies creates the modal and background

On a modal close:
only one modal and background successfully get closed.

3

@ahref thanks for the response! I’ve been moving this weekend and haven’t had much time to respond. I’m still a bit of a noob, so I’m not sure how to check if a package’s JavaScript has been loaded more than once… Can you give me a little more detailed instruction on how to do this? Thanks!

4

Pop over to the sources tab in the chrome console you have there On the left is a domain/folder/file listing of all the things loaded.

My problem here was that i was including the JS manually withing AND I had the package installed which includes the JS.

5

With v0.97 i have problems too with modals. Going back to 0.96.1 solved it.

6

@ahref Thanks! @benjamin79 thanks for the heads up. I just reverted back to that package version and all my problems went away!

7

I’ll see if I can figure out what’s going on.

Were you manually rendering the modals or using one of the packages that can handle them?

8

I simply had materialize added via the package and used the modals as directed in the docs. I had the modal in a template with a link (class of modal-trigger) to open it. I then initialized the modal in the template onRendered callback. In addition to the modal problems, I was also getting weird caret icons above my select boxes. It was totally random too… Some select boxes would have a little caret icon and others wouldn’t. Once I reverted back it all went away.

9

I can’t reproduce this.

Are you initializing twice or something?

Feel free to have a poke. Minimal attempt at a reproduction here: https://github.com/rfox90/meteor-materialize-0.97

10

Your example has one template, one modal, and no routing. Could it be that mass use of modals throughout my app has caused it to break?

11

the onRendered callback might be being called a few too many times i guess.

I understand you’re probably busy developing so I’ll leave you to it but if you ever come up with a minimal reproduction I’d be happy to help!