Overflow scroll on phone

Anki Card Design
1

overflow hidden and scroll don’t seem to be applying for me on ankidroid.

1000027987
10000279871080×2408 158 KB

1000027988
10000279881080×2408 155 KB

Any idea why?

2

I’m not an HTML or CSS expert by any means, but doesn’t the overflow: hidden style mean that it won’t have a scrollbar?

Or are you setting something different in your Styling tab for the code class?

3

You’re correct. overflow: hidden; should hide any elements extending over the boundary of the parent. But as you can see in the screenshot that doesn’t work either

4

How does that HTML element know what “the parent” is? Since there’s nothing else in the field, this seems like a question that is only answerable based on what you have in the Styling tab, right?

5

In the case of my example, <pre> would be the parent. It’s just that I only have text content and no children. Anyway, the problem is Ankidroid because the same snippet of code works as expected on the desktop version. I’m wondering if this is a known issue and whether there are any workarounds?

6

I guess we’re beyond the scope of my understanding then [I’m surprised I made it this far! :sweat_smile: ], and I should leave you to the experts. Even though this is Droid-specific, I’m going to move you to the Card Design category, because folks who like to debug cards often look there first. :+1:t4:

7

Maybe it’s an issue with the <style> tag being inside field content and not in the card Styling? Does it work if you add the below css to the card’s Styling?

pre.code {
  overflow: hidden
}
1 Like
8

What do you know! It did work. Thanks a bunch.

1 Like
9

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