How can I create a full-screen background div in AnkiMobile?

AnkiMobile (iPhone/iPad)
1

I have adapted ChrisK91’s CSS ideas to use custom backgrounds or topbars for different decks or based off tags/field contents. This always works fine on desktop Anki, but for some reason doesn’t work as expected in AnkiMobile. To use his simple example, suppose I want the background of my Spanish deck to be red (I generally use images but a colour block is easier to demonstrate with). My front card template would have:

{{Front}}
<div class='spanish'>&nbsp;</div>

And my stylesheet would include something like:

div.spanish {
  background-color: red:
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

This works fine on the desktop (macOS), and tested in iOS Safari. In both cases the background div covers the whole of the screen.

In AnkiMobile, it only covers the bit of screen where the front field is, and AnkiMobile seems to add extra margin/padding around the sides that overrides the position: fixed;. (See screenshot below.) There seems to be something preventing the div from escaping the flow and filling the entire viewport, which is what I would expect from the above HTML/CSS.

IMG_3152
IMG_31522048×1536 111 KB

What is changing in the AnkiMobile browser to make the above CSS fail? And what CSS would therefore work to stretch a div across the whole viewport? (It has to be a div because I can use tags, decks, etc in the class attribute to manipulate it, ie change colour/images.)

This also applies to adding coloured topbars for different parts of speech/sub-topics—how can I get them to position at the top and left edge of the viewport rather than where the text starts?

2

The white bars are the margins on the html element, which you can adjust. You can set min-height:100vh on .card to ensure the document is at least that tall.

3

Thanks Damien,

I’ve played around a bit more and it feels like there’s an inherent position: relative applied to body.card that isn’t present in the desktop app or the Safari browser itself—(putting the same code into an html file and opening it on iPad/iOS the div isn’t constrained by any margin applied to body and fills the screen).

I’ve ended up using

div.bg {
 background: red;
 position: absolute;
 top: -15px;
 left: -15px;
 height: calc(100vh - 130px); // to avoid scroll bars; }

All very weird! But thanks for your response anyhow!

4

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