New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
actionItems only show if drawer is modal #705
Comments
The issue is that For the |
I maintain a customized fork of this (internal to my company) and its been a while but i'm pretty sure i just did a hack fix where the drawer will toggle a class in any slotted top-app-bars and then the top app bar does a |
fixed in #1508 you need to size top-app-bar to be 100% - the width of the drawer which can be adjusted with e.g. mdc-drawer[open]:not([type="modal"]) {
--mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));
} |
What's about this issue actionItems slot disappear on desktop media for standard bar with header ? It looks similar one, but different issue. I'm using standard header for desktop version and modal type for mobile version. The actionItems slot disappear for standard with header. |
Hello @mahdiridho, please read my comment above; it should solve your issue as well |
Hi @e111077 Yes, I was referenced by @dfreedm I left a question above due to your solution doesn't work on my case, I have tried. Would you like to check my link issue above? I added your css line on my element styles, but the problem still exist Perhaps I will create a separate demo to simulate the issue |
I had a typo in the solution. The |
Here, I created a demo to simulate my issue : |
it is not yet released; please install |
For temporary solution, I adjust the drawer style to be :
But, I think you will fix this part later? Thanks |
That looks like the body's default margin. Looking at your code, it doesn't look like you have anything to remove it. Try adding this to your index.html file: <style>body { margin: 0; }</style> Since you're setting the width to 100% of the parent container, and the body has a margin, that's why the drawer isn't expanded to the full width of the viewport. |
Ah I see, you're right @asyncLiz I have updated the demo repo for the final sample Thanks everyone |
Hi, I get back my problem, either on my above demo or other projects. The above solution doesn't work anymore. You can try my demo link above. What happens? |
Anybody knows why do @material/mwc-top-app-bar either @material/mwc-top-app-bar@canary have same problem now? Previously @material/mwc-top-app-bar@canary solved the issue. |
I unfortunately cannot repro. But in your example all mwc components should have the same version. Please update mwc-drawer's version to be the same as mwc-top-app-bar. Note that our demos on github.io run at https://material-components.github.io/material-components-web-components/demos/ |
Well, I have updated the mwc-drawer to be work @canary :
But same problem : Strange.. previously it worked? |
I am still unable to reproduce this issue. Can you please provide a live reproduction case? You can fork / remix and edit https://mwc-demos.glitch.me/ with the link at the top of the page (don't forget to set all the dependencies to Additionally, this application already uses mwc-top-app-bar-fixed. You just need to add the drawer and styling |
I provided the demo on separate repo, you can just clone, install, and serve the demo app to reproduce the issue : https://github.com/mahdiridho/actionItems-issue I'm implementing property binding for the mwc-drawer type and the mwc-top-app-bar size |
Previous one (about a week ago), my dependencies worked like so :
And it solved my issue. This week I'm implementing the solution to another project but doesn't work. Then I back to my demo repo to compared, strange.. It didn't work as well with my original demo. The update dependencies doesn't work as well, now I stuck how to resolve it. |
Well, I just remix the glitch demo here : https://glitch.com/~unmarred-pewter-mayflower Now, you can see and reproduce the issue |
This is due to your use of semantic versioning. Here is a working example: https://glitch.com/edit/#!/quasar-fearless-magazine?path=package.json%3A12%3A30 in your package.json you have:
The
which is in fact an older canary commit. You need to pin it to that version using
or if you don't mind the uncertainty
which will always be the latest version. Additionally, all components in our component set should be on the same version to prevent code duplication and possible web component name registry clashes. You should also align the version of |
I see I did npm i -s @material/mwc-top-app-bar@canary and it set to semantic version. It works back now, my current package.json :
Thanks |
I'm submitting a:
What OS are you using?
kubuntu 19.10
What browser(s) is this bug affecting:
chromium, firefox. (probably all browsers)
Current behavior:
When using a top-app-bar with a drawer, the icons in the "actionItems" slot only show if the drawer has type="modal"
Expected behavior:
The drawer type should not affect the actionItems in the top-app-bar
Steps to reproduce:
In the drawer demo, remove the type="modal" from the last example and see the icons on the right side of the top-app-bar disappear
The text was updated successfully, but these errors were encountered: