AnkiMobile 100% Size

Anki Card Design
1

Hello! What is the best way to make the #qa element take up all available space in AnkiMobile without overflowing or breaking on screen orientation change?

(Window size minus top and bottom bars, and whatever’s on the sides in landscape mode)

I’ve tried many different approaches, including subtracting the insets and io-header var, but it’s not working for me and there has to be a better way.
Thank you very much.

PS: I understand that the AnkiMobile API is private and could break at any time, but could someone also please tell me the `scheme` and `msg` of gamepad input, the likes of which is used in this snippet?

webkit.messageHandlers.cb.postMessage(JSON.stringify({scheme:“ankitap”, msg:“midCenter”}));

Thanks again.

2

I don’t have AnkiMobile, so I can’t test a specific solution, but you can use this as a reference to find a working style:

3

That’s where I got insets and io-header!! :sweat_smile:

1 Like
4

Have you tried adjusting the size of the body element as well, or does it already fill the required area by default?

5

I’m honestly not sure what you mean. Changing the body’s background-color changes the color of the required area, so in that sense the body could be said to fill the required area, but I don’t think this has anything to do with layout.

6

Something like that. Although adding a border instead of setting a background color would probably be a better sanity check, as it also reveals potential overflows in addition to just crops.

7

That’s insightful. Thanks for the tip!

The body is sized to its content by default.

If the body’s width is set to 100vw, width is correct. However, the body is some distance away from the left edge of the screen, resulting in horizontal overflow. Setting margins to 0 does not fix this, and I see no other mention of it in the snippet above. I’ve experimented with position to no avail.

Subtracting –top-inset, –bottom-inset and –io-header from 100vh fixes vertical overflow, but does not clearly align with anything.

1 Like
8

Is the distance larger than the border thickness?
Also, does setting a negative left margin correctly move the body, or does it make it cropped instead?

Maybe it’s worth adding !important to the 0 margin, to make sure it overrides the AnkiMobile setting.

Another thing to try would be adding a border to the html tag to check its sizing as well.