Field with padding is visible even when empty

Anki Help
1

I have some fields on my cards which are often empty. They have a background color. If they have padding, then the field is visible even when it’s empty. The top answer here looks as though it should fix the problem but it doesn’t seem to work.

I tried working around it by nesting containers and using margin instead of padding. It worked but there was no top margin. In order to get a top margin, I had to add overflow:auto; Doing that had the same effect as padding; it caused the field to be visible when empty.

I looked at conditional generation, but as far as I could tell that’s for solving a different problem.

The fill empty fields option is unchecked.

The red block here is an empty field.

image

2

Conditional replacement should take care of this, so I don’t know why that wasn’t working for you.

You don’t say whether this formatting is on your template directly, or your template refers to a class on your Styling, but it should work the same either way. Anything inside a {{#FieldX}}...{{/FieldX}} (on your template) – whether text, image, or formatting – should be skipped when “FieldX” is empty. You should post the text of what you were trying, and perhaps we can help make that work.

3

This is basically what I’m doing.

Template


<div class=myclass>
{{cloze:myfield}}
</div>

Styling

.myclass{
background: #F6F5F0;
padding: 20px;
}
4

Cloze cards are a bit different – the card shouldn’t be created at all if the field doesn’t have a cloze marker (which it won’t if it’s empty). But you can also use conditional replacement based on which card/cloze number Anki is displaying. Card Generation - Anki Manual

Did you try conditional replacement and it didn’t work?

{{#myfield}}
<div class=myclass>
{{cloze:myfield}}
</div>
{{/myfield}}
5

I tried this which didn’t work.

<div class="myclass">
{{#myfield}}
{{cloze:myfield}}
{{/myfield}}
</div>

.myclass:empty,
.myclass:blank {
  display: none;
}
6

Do you see why? You put the class – which draws the box – outside of the conditional. Then the class can see all of that stuff inside the div tags – so it draws the box. Since the class doesn’t know anything about Anki syntax, it doesn’t know that they might or might not appear.

Try it the other way round, like I had it above.

2 Likes
7

That fixed it. Thanks a lot for your help.

1 Like