Sitelet https://web.archive.org/web/20200628004615/https://github.com/angular/angular/issues/34038
Skip to content
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

Footer not working correctly #34038

Open
ajitsinghkaler opened this issue Nov 25, 2019 · 12 comments
Open

Footer not working correctly #34038

ajitsinghkaler opened this issue Nov 25, 2019 · 12 comments

Comments

@ajitsinghkaler
Copy link
Contributor

@ajitsinghkaler ajitsinghkaler commented Nov 25, 2019 •

🐞 bug report

Description

Go to https://angular.io/api/router/ActivatedRoute then the footer is not working responsively.

🔬 Minimal Reproduction

Desktop screenshot (9)

The side menu is coming above the footer componenet

Anything else relevant?
Related issues:

@ajitsinghkaler
Copy link
Contributor Author

@ajitsinghkaler ajitsinghkaler commented Nov 25, 2019

Please tell me if I can be of any help

@ngbot ngbot bot added this to the needsTriage milestone Nov 25, 2019
@gkalpak
Copy link
Member

@gkalpak gkalpak commented Nov 25, 2019

That's strange. It works fine for me:
aio-footer

@ajitsinghkaler, does it happen when you Ctrl+Reload (click the reload button while holding the Ctrl key)?
Also, what OS, browser version, screen resolution are you on?

@ajitsinghkaler
Copy link
Contributor Author

@ajitsinghkaler ajitsinghkaler commented Nov 26, 2019

@gkalpak I 've tried a hard reload I've tried incognito mode and I tried it on Mozilla too getting the same error everywhere. Following are my details.

OS Details:
Distributor ID: Ubuntu
Description: Ubuntu 18.04.3 LTS
Release: 18.04

Browser(Google Chrome) :Version 78.0.3904.87 (Official Build) (64-bit)

Screen Resolution: 1366*768(16:9)

@gkalpak
Copy link
Member

@gkalpak gkalpak commented Nov 26, 2019

You are right. Our footer can get hidden by the sidenav drawer on some resolutions. I think the solution would be to move the footer inside the mat-sidenav-content, so that it grows/shrink as necessary to account for the sidenav drawer opening/closing.

Could you create a PR and see if any styles need adjusting?

@ajitsinghkaler
Copy link
Contributor Author

@ajitsinghkaler ajitsinghkaler commented Nov 26, 2019

okay I'll have a go at it.

@ajitsinghkaler
Copy link
Contributor Author

@ajitsinghkaler ajitsinghkaler commented Nov 26, 2019

@gkalpak the footer component is not wrapped in mat-sidebar-container So we may have to put it in the sidebar container but doing so makes a lot of space at the right because of our right side nav component. So just wrapping it up will not do we may have to handle it in a different way with js.

Desktop screenshot (10)

@gkalpak
Copy link
Member

@gkalpak gkalpak commented Nov 26, 2019

Argh 😠 True. This is not as simple as I thought.
I would rather not use JS for sizing (unless necessary), so we should try to play around a bit and see if we can pull this off using CSS.

@ajitsinghkaler
Copy link
Contributor Author

@ajitsinghkaler ajitsinghkaler commented Nov 27, 2019

@gkalpak I tried some things like making small changes in the dom and some styles if I find a solution I'll update you on that.

@ajitsinghkaler
Copy link
Contributor Author

@ajitsinghkaler ajitsinghkaler commented Dec 7, 2019

@gkalpak I think we cannot solve it without using js or we may have to think upon a new structure

@gkalpak
Copy link
Member

@gkalpak gkalpak commented Dec 9, 2019

Yes, we probably have to restructure things a bit. This is not trivial (neither to implement nor to review) given that we have to ensure that the visual result stays the same (or that any changes are intentional), so I suggest putting it aside for now (since there are higher priority things that need to be sorted out first).

In any case, thx for all the time you put into investigating this.

@ajitsinghkaler
Copy link
Contributor Author

@ajitsinghkaler ajitsinghkaler commented Dec 9, 2019

Thanks we can put it in the backlog

@gkalpak gkalpak added this to BACKLOG in docs-infra Dec 9, 2019
@gkalpak
Copy link
Member

@gkalpak gkalpak commented Dec 10, 2019

BTW, this is related to #17341 and #18411.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
docs-infra
BACKLOG
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.