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

Top of navbar is clipped in mobile and cannot scroll up #1068

Closed
courtneycb opened this issue Jul 1, 2019 · 9 comments

Comments

@courtneycb
Copy link
Contributor

commented Jul 1, 2019

On android I cannot scroll up in the navbar and 'Chapters' isn't visible.

Browser: Samsung Internet v9.2.10.15
Operating System: Android v9
Device: Samsung Galaxy S9

Another team member also experiences this in Safari on iOS. Seems to be working fine in Chrome on mobile.

rsz_1screenshot_20190702-071158_samsung_internet

@eAlasdair

This comment has been minimized.

Copy link
Member

commented Jul 1, 2019

My phone is an Oppo running android and there's no problem with the menu on chrome, however the problem does exist with my phone's base browser

@courtneycb

This comment has been minimized.

Copy link
Contributor Author

commented Jul 1, 2019

Can confirm @eAlasdair's comment on my phone. I will ask what browser was used on iPhone.

@courtneycb

This comment has been minimized.

Copy link
Contributor Author

commented Jul 2, 2019

iPhone browser used was safari.

@JackMorganNZ

This comment has been minimized.

Copy link
Member

commented Jul 2, 2019

Unless it has been modified, it would be worth searching Bootstrap issues for this problem, otherwise it needs to be reported to them. It's a serious issue, but might be a custom style of ours breaking it.

@eAlasdair

This comment was marked as off-topic.

Copy link
Member

commented Jul 2, 2019

A slightly related issue is that the internetnz logo overlaps the red check out CSU bar on my phone's base browser

@courtneycb courtneycb changed the title Cannot scroll up on navbar in mobile. Top of navbar is clipped in mobile and cannot scroll up Jul 2, 2019

@JackMorganNZ

This comment was marked as off-topic.

Copy link
Member

commented Jul 2, 2019

A slightly related issue is that the internetnz logo overlaps the red check out CSU bar on my phone's base browser

That is really weird, can you make a new issue for that, with a screenshot, browser info?

@eAlasdair eAlasdair added the urgent label Jul 3, 2019

@eAlasdair

This comment has been minimized.

Copy link
Member

commented Jul 4, 2019

Some observations:

  • There is no real mention of this issue anywhere from what I could find. However I did find a comment indicating that Bootstrap 3 does not officially support the default Android browser (not sure about BS4)
  • It appears that the navbar expands both up and down, with the third field (curriculum guides) being positioned in the center.
    • By setting $navbar-height (in _core-variables.scss) to 10rem you can see that the dropdown does indeed center itself in relation to the button (and at this height 'chapters' can be clicked on, but it looks silly)
  • Here is a code snippet approximating the state of the website without all the fluff (the ul & li tags instead of div and a tags make no difference).
    • The issue does not manifest with this example, indicating that it is an issue on our side, rather than with Bootstrap
@eAlasdair

This comment has been minimized.

Copy link
Member

commented Jul 5, 2019

This page suggests that BS4 is supported
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/

And later down suggests that the stock Android browser itself causes problems
https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#android-stock-browser
this could be part of the issue

@courtneycb

This comment has been minimized.

Copy link
Contributor Author

commented Jul 23, 2019

Resolved via #1104

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can’t perform that action at this time.