MarginBottom doesn't apply with the Fabbutton when opening a modal in Ionic 6 / Capacitor-CodePudding

The

When I open a Modal the fabbutton component goes behind the add like this:

In every page it works well, but only in the modal pages it doesn't add the margin bottom.

I have tried to overrule the CSS with the !important tag but still no luck.

How can I have the marginbottom in the modal like the other pages?

CodePudding user response：

Try using the css property --margin-bottom instead.

CodePudding user response：

You could use a container around the AD and the button that would be fixed positioned at the bottom. The button would be absolute positioned relative to it's container and would change position depending on if it grows with the AD.

Here is a very basic example:

function toggleAD() { var ad = document.getElementById("ad-bottom"); if (ad.style.display === "none") { ad.style.display = "block"; } else { ad.style.display = "none"; } }

#ad-fab-container{ position: fixed; bottom: 0; left: 0; right: 0; } #ad-bottom{ background: #ccc; color: #000; text-align: center; height: 50px; line-height: 50px; } #fab-button{ position: absolute; top: -30px; right: 10px; }

<div id="ad-fab-container"> <button id="fab-button" onclick="toggleAD()">^</button> <div id="ad-bottom">This is an ad</div> </div>