search

ain / smartbanner.js

Customisable smart app banner for iOS and Android
https://npmjs.com/package/smartbanner.js
GNU General Public License v3.0
619 stars 178 forks source link

I used smartbanner:disable-positioning but margin-top is still applied to <html> #279

Open gkatsanos opened 3 years ago

gkatsanos commented 3 years ago

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!

ain commented 3 years ago

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.

warlock1996 commented 3 years ago

forsomeone who lands here maybe this could save some time

image

in nuxt/vue u have this hook which runs on client side , lets u remove the html and css for smarbanner !

sunstarjeff commented 1 year ago

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">

ain commented 1 year ago

Cool tip @sunstarjeff, thank you!