Pinning the field

Please help me solve the problem in ankidroid: the {{Face}} field is not fixed when scrolling. Please check the code below.

<!-- front side -->

<div class="fixed-field"
id="face-field">
    {{Лицо}} 
    <hr id="face-line">
</div>

<!-- reverse side -->

<div class="fixed-field"
id="reverse-field”>
    {{Оборот}}
    <hr id="reverse-line"> 
</div>

<div id="example-container" style="text-align:left; padding-left:15px; margin-bottom: 10px;">
    {{Пример}}
    <hr id="example-line">
</div>

<div id="forms-container" style="text-align:left; padding-left:15px; margin-bottom: 10px;">
    {{Формы слова}}
</div>

/* CSS */

.card {
    font-family: arial;
    font-size: 16px;
    text-align: center;
    color: black;
    background-color: white;
}

.green-text {
    color: green! important;
}

.fixed-field {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
}

I don’t know much about CSS, but maybe you have to do something like:

<span class="fixed-field">
  {{Лицо}}
</span>

if you want your “fixed-field” CSS settings to apply to that field of your note.

1 Like

The HTML from the original poster was hidden because they did not use backticks. I’ve edited their post so it’s visible.

1 Like

Thanks for the reply :pray:, unfortunately it didn’t help

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