smartbanner.js
smartbanner.js copied to clipboard
ain
I used smartbanner:disable-positioning but margin-top is still applied to <html>
Hello! I thought using <meta name="smartbanner:disable-positioning" content="true"> is going to stop the inline margin-top being applied to the html element.
Our issue is that we use a JS framework (Vue/Nuxt) that doesnt really give you programmatic access to the html element. (we need to add the margin manually depending on the value of another variable)
I saw https://github.com/ain/smartbanner.js/pull/68 didn't advance, was wondering if there's something else?
Many thanks!
Thanks for the feedback @gkatsanos!
Yes, the solution here will introduce the breaking change and result in v2. The work you referred to was not finalised, diverged and was closed.
forsomeone who lands here maybe this could save some time
in nuxt/vue u have this hook which runs on client side , lets u remove the html and css for smarbanner !
I landed here because the Android version of the banner was showing underneath the website's fixed positioned header/nav. It was adding the 84px margin to the HTML, but the website didn't react to that directive due to the fixed positioning. (It worked fine on iOS though.)
My solution was to supersede the library's styles by adding this CSS to the page:
<style> html {margin-top:0 !important;} .smartbanner.smartbanner--android.js_smartbanner {position:fixed; top:auto; bottom:0; z-index:1000;} </style>
The result is the banner is shown fixed at the bottom of the page.
If you have the means, you could also get rid of the CSS override on HTML element and instead use server-side browser detection to add this meta tag only for non-iOS browsers.
<meta name="smartbanner:disable-positioning" content="true">
