Position: fixed not working as expected

AnkiMobile (iPhone/iPad)
1

When I use the following CSS in a card template, only on AnkiMobile the element is displayed at the bottom of the card content instead of being pinned to the bottom of the screen.

If I open AnkiWeb on iOS, it is pinned to the bottom of the screen as on other platforms. So I don’t think WebKit is the cause.

Is there any way to fix this?

.alert-box {
  …
	bottom: 0;
	left: 0;
	position: fixed;
	position: -webkit-fixed;
}

If you want to see whole codes, please see here.

IMG_0445
IMG_04451179×2556 158 KB

IMG_0447
IMG_04471179×2556 203 KB

2

You may need to give html and/or body a min-height of 100vh. Also, be aware that the webview uses the whole screen, so bottom:0 will cause it to display under the bottom bar.

2 Likes
3

I see, I will try it once with my code. Thank you!

4

Thank you dae, the idea you showed me worked well.

Also, I was inspired by the way DAE showed me how to use 100vh, but I’d like to change the css of the element I want to display to

    top:100vh;
    transform:translateY(-100%);

and found that it works without having to mess with the html or body height. Anyone else having the same problem, give it a try.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.