Getting Javascript error on ripple effect

Topic: Getting Javascript error on ripple effect

stevecjor priority asked 2 years ago

Expected behavior Should not see javascript error in Ripple effect

Actual behavior seeing: ripple.js:115 Uncaught TypeError: Cannot read property 'offsetHeight' of null at n.value (ripple.js:115) at HTMLAnchorElement.e (event-handler.js:102) value @ ripple.js:115 e @ event-handler.js:102 navigation.js:71

Resources (screenshots, code snippets etc.)

Dawid Wajszczuk staff commented 2 years ago

Hi. Could you please provide a snippet with this error? It would help a lot. Thanks.

Add comment

PianoMaster88 priority answered 2 years ago

1 0 Best answer

Hello,

I recently experienced this same thing using the latest version of MDB5 (3.9.0) with the same stack trace. I've created a snippet where I ran into this that you should be able to use to duplicate.

<a href="https://mdbootstrap.com/snippets/standard/pianomaster88/3401295" target="_blank">https://mdbootstrap.com/snippets/standard/pianomaster88/3401295</a>

Just click any of the menu links and you should see the console error. I am using Microsoft Edge but was able to duplicate in Google Chrome as well (running Windows 10).

It looks like it's failing on the Ripple class itself where the element is not defined (and therefore the offsetHeight is not defined):<img src="https://usercontent.mdbootstrap.com/mdb-images/support/833f3cae-c1c1-4910-965b-4d1ce81535bd-Capture.jpg" alt="screenshot of bug" title="">

Let me know if I can be of more assistance in this regard as well, happy to provide more screenshots or information if needed.

I should note that the ripple seems to still work, it just creates a console error.

Thanks!

Please insert min. 20 characters.

Hello,

I recently experienced this same thing using the latest version of MDB5 (3.9.0) with the same stack trace. I've created a snippet where I ran into this that you should be able to use to duplicate.

https://mdbootstrap.com/snippets/standard/pianomaster88/3401295

Just click any of the menu links and you should see the console error. I am using Microsoft Edge but was able to duplicate in Google Chrome as well (running Windows 10).

It looks like it's failing on the Ripple class itself where the element is not defined (and therefore the offsetHeight is not defined): screenshot of bug

Let me know if I can be of more assistance in this regard as well, happy to provide more screenshots or information if needed.

I should note that the ripple seems to still work, it just creates a console error.

Thanks!

Dawid Wajszczuk staff commented 2 years ago

Hi,

Thanks a lot for this snippet. We will take a closer look at this case. It seems weird because in this snippet everything works fine without errors https://mdbootstrap.com/snippets/standard/d-wajszczuk/3403064#html-tab-view.

Keep coding,
Dawid

PianoMaster88 priority commented 2 years ago

Thanks Dawid!

I wonder if it's something with the slim side-nav specifically? Just a thought as that's really the only thing different. You're correct that this one appears to be fine. In my snippet I had not implemented a button to change to the slim mode, but notice in the code I set the data attribute to indicate it as slim.

Thanks!

Dawid Wajszczuk staff commented 2 years ago

It can be related to slim option. However, my quick check, which included removing slim options, didn't change anything. The error still occurs. We will investigate this. And thanks for help :)

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 3.5.1
Device: Macbook Pro
Browser: Chrome
OS: MacOS Catalina
Provided sample code: No
Provided link: No

stevecjor

62Support score
8Questions 2Answers 1Snippets