For some reason ripple-wave styles are not calculated properly. I will investigate this issue in the nearest future. If I'll find any other solution/fix for your case I will get back to you.

As a workaround use CSS:

.ripple-wave {
        height: min-content !important;
        width: min-content !important;
    }

Thank you that worked...

Now I have an unexpected resize on the Buttons onClick. https://mdbootstrap.com/support/angular/button-changes-size-on-click/ One User had a similar Problem, do you have a better solution than defining an max-height and width?

Hello, thank you for patience.

This error - Bootstrap doesn't allow more than one instance per element. Bound instance: bs.popover. comes from this file: https://preview.knows.ch/fileadmin/templates/knows.ch/Resources/Public/JavaScript/default.1647509674.js

Starting from line 95:

// Info Popover
$('body').popover({
    selector: '.kn-popup',
    container: 'body',
    trigger: 'focus hover'
});

// Tooltip
$('body').tooltip({
    selector: '[data-toggle=tooltip]',
    container: 'body',
    trigger: 'focus hover'
});

It initializes BS popover/tooltip on body upon document gets ready. Deleting that solves the error from the console.

And now - problem with animations is that animation CSS is not there. As I can see you link mdb.min.css in HTML here:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css" media="all">

it leads to the Free version of MDB CSS. Animations are PRO feature, so in order to fix this issue, please link MDB Pro CSS file (you can download it from your Orders).

In the answer above I have showed you a proper syntax - if this doesn't work, it may be because your animations don't initialize after document is ready. If it happens, you can initialize them manually via JS. Here is an example (without options - because I assume you passed options via data attributes already):

const element = document.getElementById('example');
const animate = new mdb.Animate(element);
animate.init();

Keep Coding,

Michal from MDB

Its not reproduceble in snippets... if I copy the div its works... All animations don't work, but the nav-tab work. https://preview.knows.ch/ I thinks it related with an import problem or with conflict with an other import

Please reproduce this error in MDB Snippets https://mdbootstrap.com/snippets/ so it will be easier to debug your issue. If the code I've sent you in the snippet doesn't work in your project, then there is a problem with the setup. Could you please also inspect where in the code this Bootstrap doesn't allow more than one instance per element. Bound instance: bs.popover. error happens?

Hello, thanks for the answare it still does not work.

I it a problem if the Site uses already bootstrap 4?

Bootstrap doesn't allow more than one instance per element. Bound instance: bs.popover.

It should be

data-mdb-animation-start="onHover"

instead of

data-mdb-animation-start="OnHover"

See the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3778281#html-tab-view