Empty area between image and bottom bar wastes screen real estate [AnkiMobile]

Anki Card Design
1

Hey, thanks for the app, it’s great!

One thing that bothers me is this empty area between my cards and the bottom bar. I can’t find any options that use it. It’s always empty.

I created a test card with a specified height. If I add even one pixel, a scroll bar appears. And this empty area is still not being used. The scrollbar “ends” right before it.

On the screenshot (attached) you can see that the background of the bottom bar with answer buttons is slightly grey, but the area I’d like to reclaim is black:

image
image1179×2556 87.1 KB

Thanks for any help and pointers.

1 Like
2

In cards with just text, that same area isn’t empty, so I’m wondering what all is different in that card for you.

For someone to take a look, we’d need at least some of the following things – as text, each in their own preformatted-text-/code-block. But exactly what we need depends on where you’ve made the modifications you’re asking about, so you’ll know better than us.

  • Styling for that note type
  • Front/Back templates for that card type
  • Underlying HTML for that note
1 Like
3

Thanks for the reply! Here they are:

Front:

<div class="instr">Jakie znaki graficzne odpowiadają nazwie:</div>
<br>
{{Name}}

Back:

{{FrontSide}}

<hr id="answer">

<span class="letter">{{Uppercase}} {{Lowercase}}</span>

Styling:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: beige;
    background-image: url(greek.png);
}
.instr {
    font-size: 20px;
    color: CornflowerBlue;
}
.card svg {
    max-width: 100%;
}

.card img {
    display: inline-block;
    border-style: inset;
    border-width: 2px;
    max-height: 200px;
    margin-top: 10px;
}

.letter {
    font-size: 50px;
}

So I think it’s nothing particularly special, hmm.

I have more advanced cards with a flexbox layout, which do the same thing (empty black area), but I chose this one as an example, since it’s simple.

4

It seems to be working fine for me, so I don’t think it’s a bug in AnkiMobile. I don’t think it’s your image – but you should try a different image, just in case.

I wonder if it is device/screen-size specific? That might suggest that there’s some CSS that would make it work fine on your screen too [moving this thread to Card Design].

IMG_0221.PNG
IMG_0221.PNG750×1290 196 KB

1 Like
5

I didn’t test it (and don’t have AnkiMobile to test).

What I see is that there is no visible gap for danika, but there is a visible gab for OP. Maybe the image is at fault due to the aspect ratios?

Maybe something like background-size - CSS: Cascading Style Sheets | MDN might help? E.g try.

.card {
    ...
    background-size: cover;
}
2 Likes
6

I also don’t own an Apple device to test but something that might help if Anon’s suggestion don’t:

body {
 min-height: 100%;
}

It helped me with a similar problem I had on an Android device.

7

@Danika_Dakika, hmmm, our screen ratios are different, looking at the screenshots. Maybe if my wasn’t as tall, the area would disappear, too?

@Anon_0000, the background image is much larger than what is shown, the mobile app is showing maybe ¼ of it.

sorata, if I add min-height: 100%, nothing happens. But with min-height: 100vh; margin: 0, a scrollbar appears on each card (only in AnkiMobile, on iOS). Which is quite confusing because body should be able to take the whole (100%) view height available to it without scrollbars. The extra area is still there at the bottom.

Here’s a try at adding a lot of lines to the card. It looks as expected in the Desktop editor, but has additional margin (or padding) on AnkiMobile within the specified background, and also the empty area, which isn’t black now, but beige (because it’s daytime). Also please not where the mobile scroll bar ends – shouldn’t end right before the answer buttons instead?

I’m guessing it’s the same beige that I specified in my CSS as .card { background-color: beige; }? OTOH, I don’t have a night time variant.

image
image1179×2556 81.2 KB

image
image1920×1183 86 KB

@Danika_Dakika doesn’t this difference between AnkiMobile and Anki Desktop a slight clue that this could be an AnkiMobile bug? Esp. considering our different screen aspect ratios.

8

I recorded the iPhone screen when scrolling that last card modification with a lot of lines.

https://youtube.com/shorts/FbLyy5aqaaM

I don’t think this scrolling behavior at the end is expected?

9

Tried attaching the image to the html element instead of the .card? You probably have a margin or padding on one of the outer elements.

10

dae probably means

html {
 background-image: greek.png;
}

if it wasn’t clear.

actually, try:


body {
 background-image: url(greek.png);
}
11

Setting it on HTML breaks the desktop rendering:

html { background-image: greek.png; }

But here’s me new CSS with the background on body. I have also set all margins and paddings to 0.

html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    background-image: url(greek.png);
}
.card {
    margin: 0;
    padding: 0;
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
}
.instr {
    font-size: 20px;
    color: CornflowerBlue;
}
.letter {
    font-size: 50px;
}

Unfortunately, there are no changes, and the extra area at the bottom is still there. A screenshot:

image
image1179×2556 69.2 KB

Doesn’t the scrollbar behavior in the video suggest that there’s something off with where the WebView ends on iOS? At least on my aspect ratio.

https://youtube.com/shorts/FbLyy5aqaaM
12

Another clue. When I create a rectangular <div> with a specified height, a scrollbar appears as soon as the <div> were to cross into this white area at the bottom, even by 1 px. Similar with regular text.

13

Please export 1 card into a sample .apkg and upload it somewhere, and I’ll take a look.

14

@dae thanks a lot! Here’s one:

https://drive.google.com/file/d/1TjgTYt-6tUQltGtHSiHp33F60Y6QSBXV/view
15

Thanks for that. Adding min-height: 100vh to the .card should fix it, as the page is currentlty too small.

16

@dae, I have added just min-height: 100vh; to the .card exported above, and unfortunately got similar results:

  • The card is now much taller than the height of the WebView.
  • It seems as if 100vh meant the height of the whole phone screen? :flushed_face:
  • And when I scroll to the very bottom, the extra area is still there.

Here’s a screenshot:

image
image1179×2556 58.3 KB

17

BTW, on cards where I need to put something at the bottom, I set min-height: like that:

.android .card {
  min-height: calc(100vh - 30px) !important;
}

.iphone .card {
  min-height: calc(100vh - 212px) !important;
}

If I add even 1 px more (e.g. calc(100vh - 211px) instead of 212 px), a scrollbar appears on iOS.

I’m never able to get rid of this extra area when playing with height: or min-height: on different HTML elements.

That’s why I suspected it was outside of the WebView.

18

What iOS version are you using?

19

@dae iOS 18.5 (22F76) running on iPhone 14 Pro, the system says it’s up to date.

20

Sorry, I didn’t read your previous message properly. The webview is the height of the entire screen, so that the top and bottom bars’ translucency is affected as you scroll, like in Safari.

The white bar at the bottom is caused by webview insets, which are there so that the page can be scrolled up when it’s <= the screen height - otherwise, content that appears under the bottom bars you might not be able to scroll to. If you set the background color to red instead of using an image for example, you should be able to see iOS coloring the insets that same color. It seems it handles images differently though, and I don’t know if CSS can be used to work around this or not I’m afraid.