Can't visualize long cards entirely anymore

[ltsdw]

It started from the past 1.5/2 weeks ago out of nothing, no updates from ankidroid or the smartphone (as it’s an old j7, it doesn’t get updated anymore too), no nothing.
Now I cannot scroll all the way up/down, the content is cropped if it’s too long, it happens on the ankiweb too. (ankiweb on the mobile chrome or the desktop browser, but it doesn’t happen on the desktop anki, I think it’s a different render mechanism there).

I’ve tried uninstalling/reinstalling updating the ankidroid to 2.16.2, downgrading back to 2.15.6 (the version it was), tried disabling/enabling the hardware acceleration, tried enabling/disabling the replace html tags for new lines, nothing worked so far.

I’ve been using ankidroid for the past six years I think, never bothered to tinker any option, just straight up create new cards and revise them.

AnkiDroid Version = 2.16.2

Android Version = 8.1.0

ProductFlavor = play

Manufacturer = samsung

Model = SM-J710MN

Hardware = samsungexynos7870

Webview User Agent = Mozilla/5.0 (Linux; Android 8.1.0; SM-J710MN Build/M1AJQ; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/115.0.5790.168 Mobile Safari/537.36

ACRA UUID = 3991ae35-be37-4555-a1fc-6fb0b59bca1f

New schema = false

Scheduler = std2

Crash Reports Enabled = true

DatabaseV2 Enabled = true

[Shigeyuki]

Maybe the card template HTML and CSS are causing the problem?
Try using longer sentences in the default basic note type and see if the problem recurs.

[ltsdw]

Oh hey, thanks for answering.

I never really touched this so I don’t know if it’s what you are talking about, but, here is the front/back style of the card.

Front:

{{furigana:Front}}

Back:

{{FrontSide}}

<hr id=answer>

{{Back:furigana:Back}}

As for the default basic note type, it’s what I’ve been using since I started using Anki, never came to know how to style it or use anything different, the default always suited me well.

This is from the anki web when click on the inspect browser’s menu:

.card {
font-family: source han sans jp;
font-size: 30px;
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-box-orient: horizontal;
margin: auto;
color: black;
background-color: white;
}

Inspecting the html of the page, I can see that all the content is there, it just don’t allow me to scroll through it entirely.

[Shigeyuki]

That card template is centred top, bottom, left and right, maybe that’s the cause of the problem, the default is top-centred.

Try using this for the card style.

• Edit > Cards…> Styling

.card {
    font-family: source han sans jp;
    font-size: 30px;
    text-align: center;
    color: black;
    background-color: white;
    margin: 30px;
}

[ltsdw]

Thank you so much, I think we are at the right track.

But now there’s a problem (at least at the ankidroid), while on the ankiweb, all works well, except that I need to scroll to the side a bit because the content isn’t centered but that isn’t a problem.

At the ankidroid, while revising the card, it’s blank, the show answer button doesn’t do anything. But I can browse through the cards select any card and click the visualize button, the card displays normally (I can also scroll normally up/down, the content isn’t centered as it used to be but that isn’t a problem).

[Shigeyuki]

It is strange that AnkiWeb doesn’t centre the content. In my device it is centred on the top, so I don’t have to scroll to the side.

AnkiDroid seems to be something else the problem.
Restarting your phone and clearing the app cache or reinstalling Anki may solve the problem.

[ltsdw]

You’re right, I force-stopped it and now the card is displaying again.

Yeah, the content is somewhat of right aligned, but it isn’t a problem at all, I’m happy to be able to use it normally again.

Again, thank you!

[Shigeyuki]

I can’t seem to reproduce the problem on my device. If the “margin: 30px;” is removed, the width may be slightly wider, but I don’t know how else to do it.Thanks!

.card {
    font-family: source han sans jp;
    font-size: 30px;
    text-align: center;
    color: black;
    background-color: white;
}

[ltsdw]

Yup, that did the trick, everything working perfectly as before, thank you so much <3