Anki Forums

Is Flexbox supported in Anki CSS?

I’m trying to have a footer with additional info at the bottom of the back card.
When the content is not much, the footer should stick to the bottom of the page, when the content of the back card is longer, the footer should be pushed down and showed after scrolling.

like this page: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

I’m trying to use flexbox but cannot make it work, is it supported?

If it’s supported in Chrome 57, then it should work in Anki.

https://caniuse.com/#feat=flexbox

It doest expand the card content…
this is the code i’m using:

Back template:

<body>
    <div class="card-content">
        <div>
            {{cloze:Text1}}
        </div>
    </div>
<div class="footer">
    <div>
        {{Source}}
        {{Tags}}
        Footer test Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, temp
    </div>
</div>
</body>

CSS:

html, body {
  /* IE 10-11 didn't like using min-height */
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.card-content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
  background: lightgray;
}
.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
  background: gray;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font: 16px Sans-Serif;
}

}
footer {
  background: #42A5F5;
  color: white;
}

This is how it renders in forefox:

And this is Anki:

You can see that in Anki, the main content doesn’t expand to push down the footer.

You’re not following the example you linked to - 100% is not the same as 100vh. The web toolkit is based on Chromium, so Chrome will likely give you closer results than Firefox.

The code renders fine on even Chrome, with both 100% and 100vh.

I think there is something about how Anki consider the Body element.
See the following example:

HTML:

<body class= container>
<div class="card-content">
    <div>
        {{cloze:Text1}}
    </div>
</div>
<div class="footer">
    <div>
      Footer test Pellentesque habitant
      morbi tristiqu
      senectus et netus et malesuada
      fames ac turpis egestas.
      Vestibulum tortor quam,
    </div>
 </div>

CSS:

body {
margin: 0;
font: 16px Sans-Serif;
}

.container {
display: flex;
flex-direction: column;
height: 100vh;
}

.card-content {
flex: 1;
padding: 20px;
background: pink;
}

.footer {
padding: 20px;
background: gray;
}

footer {
background: #42A5F5;
color: white;
}

It doesn work:

But if I change the body tag to div, it works (with the same CSS):

Leaving the body tag as the top hierarchy tag, and putting the flex formatting directly under the body element, in CSS, doesn’t work either:

naming the top level “mycard” makes it work:


So, it just doesn’t like the body element.

Where can I read about the structure of the underlining html that Anki uses?
there is something I don’t understand about how Anki treats the body element.
Maybe is “outside” what we can edit in the card html?

For example, at what level is the the card class applied by Anki?
To the html or the body?

You can use the AnkiWebView Inspector add-on to inspect the webviews.

1 Like

thanks, that is very useful…
if you could also suggest a way to syntax highlight the code in the card editor…
the current addon doesnt work on 2.1.33…

Ok, using the web Inspector add on, now is more clear:

it looks like everything we put in the HTML of the card editor is, in fact being put into a div, with id= qa, which is itself contained into the actual body element of the HTML.

there are others div inside the body, so anything that is inheritable, like font size , colors, is ok to style into the body element in CSS.

Stuff that acts on layout might get problematic, as I experienced.
see structure of card in web inspector (with <div id="qa"> highlighted):