[ Sharing Tricks ] Make a giant field scrollalbe

Anki Card Design
1

Hi,

I’d found a very useful method to handle a giant field in the card – :point_right: make it scrollable.

Front/Back

<div class="scroller"> {{YOUR_FIELD}} </div>

Style

.scroller {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}

::-webkit-scrollbar {
    display: none; 
}

Demo

2020-08-11_14-24-18 (1)
2020-08-11_14-24-18 (1)467×584 1.57 MB

GIF on imgur

3 Likes
2

here’s how I deal with those large fields.

Field

<button id="hover" style='cursor: default; color: lightblue; width: 130px'>Show</button>
<div id=stuff style='border: solid 1px dodgerblue; padding: 10px 3px; text-align: left'>
{{Field}}
</div>
<br>

Styling

#stuff {
    display: none;
}

#hover:focus + #stuff {
    display: block;
}

adds a button to card and when you click it, it shows the field. to close it, you can click on anywhere else on the card. (I usually don’t need to see those fields’ content, so a button to show the content when I need it suffices)

2 Likes
3

Thank you for sharing this approach!

In fact, I’m seeking a way to toggle/untoggle iframe. Your suggestion is very helpful for me. Do you know how can I delay the loading of iframe content until i hit the show button?

4

Delaying it can be done in JavaScript (i think)
And i don’t know anything about JavaScript
But about toggling it: you can put your iframe in place of {{field}} and the button will work as a toggle

<button id="hover" style='cursor: default; color: lightblue; width: 130px'>Show</button>
<div id=stuff style='border: solid 1px dodgerblue; padding: 10px 3px; text-align: left'>
Your iFrame
</div>
<br>
5

Thank you very much! :grin: