Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Safari button nav overlaps amp-sidebar

See original GitHub issue

To fix safari bottom navigation bar from overlapping my amp-sidebar I have added the following css:

amp-sidebar {
   mas-height: 100%!important; 
}

i.e. I changed vh to %, and it works fine. but the amp-validation fails because it does not allow !important in css.

According to amp-sidebar css source, the max-height property is set to max-height: 100vh!important;.

reference: https://github.com/ampproject/amphtml/blob/7e2ec79855e8325ac5d1cca0e15ed5aef8f50877/extensions/amp-sidebar/0.1/amp-sidebar.css#L20

My question is:

How am I supposed to change the amp-sidebar’s max-height property without having validation errors?

Issue Analytics

State:
Created 6 years ago
Comments:10 (8 by maintainers)

Top GitHub Comments

1reaction

aghassemicommented, Jan 24, 2018

@dryleaf It is not possible as it stands (!important) is banned in AMP, as a workaround, you can have a separate div in you sidebar that has a smaller height.

I consider Safari bottom nav overlapping sidebar to be a bug for us to fix, therefore I am renaming this issue.

0reactions

dryleafcommented, Jul 19, 2018

Thanks for fixing this.

Top Results From Across the Web

Sidebar and navbar overlapping - Stack Overflow

use Z-index to just make the navbar be behind the sidebar. (will make the menu button seem out of place (but can use...

Text overlap? Button placement? Problem w…

Whenever I go to my hotmail email account the text overlaps? Somtimes it doesn't stay in its cell and the buttons will be...

Bootstrap 4 Safari Images and text overlap - Stack Overflow

The image and the text of the columns overlap. Maybe the height of the image is wrong or the image does not resize...

Neve - Store ThemeIsle

Starter content hero image; Upside down menu caret in Safari; Customizer search ... Active buttons from the editor sidebar overlapping the panel heading ......

readme.txt - Sundeep Furniture Ltd.

A fully AMP optimized and responsive theme, Neve will load in mere ... to close button inside mobile nav menu to prevent the...