Snackbar appears behind dialogs in Angular

[joshcomley]

Make sure to check the demo app(s) for sample usage

Done (there is none for snackbar, but I've followed the instructions to set-up)

Make sure to check the existing issues in this repository

Done

If the demo apps cannot help and there is no issue for your problem, tell us about it

On Android (not tested on iOS), the snackbar sits behind the modal dialog, making it invisible for full-screen modals, or potentially invisible (or at least faded behind the darkened background) in non full-screen modals.

I'm pretty sure it used to work, but I may have not noticed until now!

Which platform(s) does your issue occur on?

• Android 7.0
• ASUS ZenPad 3s 10 (haven't tested with anything else; emulators don't work on my PC)

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.3.2
• Cross-platform modules: 6.3.2
• Runtime(s): 6.3.1
• Plugin(s): nativescript-material-snackbar - 3.1.1

Please, tell us how to recreate the issue in as much detail as possible.

• Create a new NS Angular app
• Install nativescript-material-snackbar
• Instantiate via dialog (if not full-screen, you can likely see the snackbar, but it is still behind the darkened background)

OR:

• Clone and run: https://github.com/joshcomley/ns-snackbar-dialog-bug

Is there any code involved?

• See git link above

[farfromrefug]

@joshcomley fixed in the new version

[joshcomley]

@farfromrefug I have tried the new version, using, I'm assuming, the view property - but it still doesn't appear over the top of my modal, unfortunately

[joshcomley]

Just to clarify, I passed in the injected Page from the modal dialog component to the view parameter on the SnackbarOptions

[farfromrefug]

@joshcomley it should work in 3.1.2. You must be in a case i did not handle. Can you try the demo-vue app from the repo?

• clone
• run npm run build.plugin
• run the demo-vue
• long press the snackbar list entry (it opens a modal window)
• test the snack

[joshcomley]

@farfromrefug I'm using Angular, though, is the Vue example useful as a test in this case?

[farfromrefug]

@joshcomley yes it is vue but it should not make any difference

[joshcomley]

I cannot run build.plugin as I get:

'cp' is not recognized as an internal or external command, operable program or batch file.

I'm assuming perhaps the build is not compatible with Windows?

[farfromrefug]

@joshcomley shoot indeed it seems it s not :D Pull and run npm run build.plugin.win

[joshcomley]

To be fair I should have figured that out as I added that tsc-win command in:

https://github.com/Akylas/nativescript-material-components/commit/a4379ccdf6dd706e328c5ecf8f811035061b7851

For some reason it's still not working, but whilst I look into that, could you please check my demo github repo:

https://github.com/joshcomley/ns-snackbar-dialog-bug

I've updated it to reflect the latest version but it still isn't showing the snackbar.

[farfromrefug]

@joshcomley you mean it is not working with the demo-vue? We can chat on slack that would be simpler i think

[joshcomley]

Sorry no I meant tsc-win isn't working, but I'm about to submit a PR that fixes it

[joshcomley]

There ya go: https://github.com/Akylas/nativescript-material-components/pull/103

[joshcomley]

So the Vue demo doesn't work for me, I get an Unexpected identifier error in bundle.js, and when I look to see what it is, I see this:

/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function(global) {module.exports = {"type":"stylesheet","stylesheet":{"rules":[{"type":"rule","selectors":["button"],"declarations":[{"type":"declaration","property":"elevation","value":"2"}]},{"type":"rule","selectors":[".falseFAb"],"declarations":[{"type":"declaration","property":"elevation","value":"2"},{"type":"declaration","property":"font-size","value":"40"},{"type":"declaration","property":"border-radius","value":"32"},{"type":"declaration","property":"width","value":"64"},{"type":"declaration","property":"height","value":"64"},{"type":"declaration","property":"margin","value":"30"}]},{"type":"rule","selectors":[".buttonYellow"],"declarations":[{"type":"declaration","property":"background-color","value":"yellow"}]},{"type":"rule","selectors":["mdslider"],"declarations":[{"type":"comment","comment":" track-background-color: #E0E0E0; "}]},{"type":"rule","selectors":["bottomnavigationbar"],"declarations":[{"type":"declaration","property":"inactive-color","value":"gray"}]},{"type":"rule","selectors":[".item-with-border"],"declarations":[{"type":"declaration","property":"height","value":"50"},{"type":"declaration","property":"border-bottom-color","value":"green"},{"type":"declaration","property":"border-bottom-width","value":"2"}]},{"type":"rule","selectors":[".cardviewtest"],"declarations":[{"type":"declaration","property":"border-color","value":"green"},{"type":"declaration","property":"border-width","value":"4"},{"type":"declaration","property":"border-radius","value":"20"},{"type":"declaration","property":"ripple-color","value":"blue"},{"type":"declaration","property":"elevation","value":"5"},{"type":"declaration","property":"background-color","value":"lightgray"}]},{"type":"rule","selectors":[".cardView"],"declarations":[{"type":"declaration","property":"margin","value":"20"},{"type":"declaration","property":"border-radius","value":"2"},{"type":"declaration","property":"elevation","value":"2"},{"type":"declaration","property":"dynamic-elevation-offset","value":"5"},{"type":"declaration","property":"ripple-color","value":"red"},{"type":"declaration","property":"background-color","value":"white"}]}],"parsingErrors":[]}};;
    if (true) {
        module.hot.accept();
        module.hot.dispose(() => {
            global.hmrRefresh({ type: 'style', path: './app.scss' });
        })
    }
u
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("../node_modules/nativescript-dev-webpack/node_modules/webpack/buildin/global.js")))ndefinedundefinedundefinedundefinedundefinedundefined

/***/ }),

/***/ "./examples/ActivityIndicators.vue":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _ActivityIndicators_vue_vue_type_template_id_17a213bb___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./examples/ActivityIndicators.vue?vue&type=template&id=17a213bb&");
/* harmony import */ var _ActivityIndicators_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./examples/ActivityIndicators.vue?vue&type=script&lang=ts&");
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _ActivityIndicators_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _ActivityIndicators_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../node_modules/vue-loader/lib/runtime/componentNormalizer.js");

You can see the solitary u right in the middle, have no idea why?!

[farfromrefug]

@joshcomley weird. Can you try by adding --no-hmr --env.sourceMap=false ? That might fix it for now

[joshcomley]

@farfromrefug Thanks for your help on this. I can confirm it works in the Vue demo, so I inspected the code and you're passing in this.nativeView. Not having used Vue, I'm assuming that is the equivalent to injecting Page in a modal and using this.page.nativeView in Angular?

I did try passing this.page.nativeView in but I get the following error:

No suitable parent found from the given view. Please provide a valid view.

[farfromrefug]

@joshcomley when i am "in" the material plugin, there is no Vue/Angular.. Just Core classes. Now you use the view option for the snackbar?

• try without
• if you do indeed you need to pass the core View class object. Don't really know how to get it in Angular though :s

[joshcomley]

Yeah, that's what I thought. It was platform agnostic. So that's the key - how do I get hold of the core View class? Perhaps it's Page I can inject in AppComponent.ts. I'll investigate.

What do you mean by "core" View, exactly, though?

[joshcomley]

OK so I've tried:

Page object, injected via app.component.ts. Page object's nativeView property, injected via app.component.ts. Page object, injected via the modal dialog. Page object's nativeView property, injected via the modal dialog.

Nothing works :(

Edit: I've also tried without a view parameter but it still doesn't work

[joshcomley]

OK so I've managed to recreate the same effect that you have in Vue in Angular:

constructor(private page: Page) {
    this.viewForSnackbar = this.page.content;
}

However, even in the Vue example this does not have the desired effect when the modal is not full screen:

The snackbar should always appear at the bottom of the viewable area of the app, not overlaying itself over the content of the modal.

[farfromrefug]

@joshcomley Yes i know but i can't get it work right now. Something wrong with the fragments. Might even be a native lib issue. If you dont use fullscreen i cant really help right now. I mean no solution

[joshcomley]

Gotcha, OK, thank you for the update.

In case it's any help, I've found nativescript-toasty works as expected, only it's not "Material". Nevertheless, maybe there's a pointer in the source code:

https://www.npmjs.com/package/nativescript-toasty https://github.com/triniwiz/nativescript-toasty

[farfromrefug]

@joshcomley thanks but toasts have nothing to do with snacks. They are handled by the system and appear on top of anything. They are drawn last in the android stack.