How to show tags at the bottom of computer screen, not in bottom of front field

Dashakol's Avatar

Dashakol

28 Jan, 2018 09:42 PM

Hi,
I know that tags can be shown by adding {{Tags}} to the front field in the Card Template, but the problem is that this way tags are ended up in the middle of computer screen which is the lower border of front. Is there any way to show tags at the bottom of screen (i.e. above the 'show answer' button)? I thought of adding several <br> but it will elongate the front unnecessarily and will cause much more problems specially on mobile. Positioning the front at the bottom is also not a useful solution because it will disrupt the natural order.
Thanks

  1. Support Staff 1 Posted by Damien Elmes on 29 Jan, 2018 01:00 AM

    Damien Elmes's Avatar

    I'm afraid I can't provide advice on HTML/CSS, so I've moved this to the community section.

  2. 2 Posted by Guillem Palau-S... on 29 Jan, 2018 09:34 AM

    Guillem Palau-Salvà (contributor user)'s Avatar

    On CSS styling add this: .tag {position: absolute; bottom:1px; left: 1px;}
    and on front template add this: <div class="tag">{{Tags}}</div>

  3. 3 Posted by Dashakol on 29 Jan, 2018 10:22 AM

    Dashakol's Avatar

    Thanks for the hint, I searched a little and found the needed CSS. Here is how the Front Template should be changed:

    {{Front}}
        <div style="position: fixed; width: 95%; bottom: 5px">
    {{#Tags}}<b>Tags:</b> {{Tags}}{{/Tags}}
        </div>

    I've attached the screenshot of the result.

  4. 4 Posted by Dashakol on 29 Jan, 2018 10:29 AM

    Dashakol's Avatar

    Hi Guillem, I saw your replay right after I posted mine.
    Timely as usual, thanks a lot.

  5. 5 Posted by kenppy on 21 Feb, 2018 12:01 PM

    kenppy's Avatar

    Has anyone tried getting this into the centre-bottom of the ipad app. On the ipad I cannot place anything lower than the answer line, which appears to be the 'bottom'.

    Any hints as to how to place this just above the answer buttons?
    thanks

Comments are closed, but you can start a new discussion.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac