Element which stores the solution typed by the user

[Eltaurus]

@amaccuish

FYI I use <input id="typeans" type="text" inputmode="text" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">

because the autocorrect on ios takes up space and is kind of against the idea of Anki IMHO.

That’s a good one. Thank you for the tip, I’ll add those options to the template.

---

@amaccuish

One more thing would be scrolling up to the top when showing a correction, you’ll see in the first screenshot, at least on my iPhone 14, that it’s cut off.

You can try adding

<hr id="answer">

as the first line on the back (before <div id="backwrap"...). And the following CSS on the styling tab to hide the appearing horizontal line:

#answer {
    margin: 0;
    border: 0;
}

The backside doesn’t appear scrolled down neither on desktop nor in AnkiDroid for me (no matter how many extra fields I put on the back and keys on a card keyboard), so I can’t tell for sure if this would work, especially on iPhone, but should be worth a try.

---

@amaccuish

Oh and the Hint svg doesn’t show

That’s probably because Safari does not support svg images in css (and I guess Anki Mobile uses the same web engine on iOS):

The same issue is likely the cause for the audio buttons looking wrong as well.
One can of course put the image inside the HTML template itself, but I’m not sure fixing a cosmetic issue on a single platform is worth complicating the template for everyone. Maybe iOS web engine will catch up with the rest of the browsers at some point. But if you’d still like to have that hint button icon right away, I can suggest several alternative ways to put it in.

---

There is a couple of other things that look different that I notice. If you don’t mind, could you test several styles to try and make the template appear normally?

1. The first issue is with the centering of items on the info screen (back of a card). There shouldn’t be any support issues with it on iOS, so maybe it is simply gets overwritten by some default styles not present on other platforms. To enforce the styling you will have to find the following part on the styling tab:

   .card-content {
   align-items: stretch;
   ⋯
   

   and put !important at the end of the CSS descriptor:

   .card-content {
   align-items: stretch !important;
   ⋯
   

   If it doesn’t work, you could add a completely new different rule (anywhere on the styling tab, outside of any existing rules):

   .card-content.back {
       align-items: start;
   }
   

2. The second issue is with the input line becoming semi-transparent after answer submission (it doesn’t do that on other platforms). To fix this I suggest you try adding the following rule:

   #typeans:disabled {
       opacity: 1 !important;
   }
   

[amaccuish]

@Eltaurus

#typeans:disabled {
    opacity: 1 !important;
}

Not 100% sure what you mean the centering of the info scren but I applied your changes

Also the answer is now properly showed, only a little cut off from the top of the screen but that works for me

Let me know if you need anything else!

[Eltaurus]

@amaccuish

Not 100% sure what you mean the centering of the info scren

On the backside, all text is supposed to be aligned left (as it is on Memrise and on other platforms with this template), as you can see here:

@mthierst

dummy945×2048 99 KB

On your screenshots, and the ones @rean provided above, the content appears centered instead. The adjustments suggested in the first point were supposed to fix that. Which of those did you try? (the one from the second point that you quoted seem to work as intended and make submitted answer visible clearly)

---

@amaccuish

Also the answer is now properly showed, only a little cut off from the top of the screen but that works for me

is the top cut from the page completely, or is it just the default screen position, and it can be scrolled higher to see the whole thing?

There is another thing that might help with this thing. Can you try adding this piece to the styling:

body {
    min-height: 100svh !important;
}

and if the top of the answer still appears cropped, try changing it to:

body {
    min-height: 90vh !important;
}

(and lower the number further if it still has no effect)