Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

aligning cell contents (left, right, center, top, botton...)

See original GitHub issue

Hi,

I created a dynamic table and the header-labels are wider than the individual contents of the rows. (see attachment) padding I am able to format the values based on python ‘format coding’ but I seem not to be able to ‘right-align’ the values with this coding. He seems to ignore ‘>’ or not supported with flask_table at all?

value assignment to flask_table variable: list[entry.name] = '{:>,.2f}'.format(value).replace(",", "X").replace(".", ",").replace("X", ".")

Is there a way to specify the position (left, right, center, top, bottom) of the values in the cells?

regards Michael

Issue Analytics

State:
Created 6 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

plumdogcommented, Dec 24, 2017

I (approximately) copied your HTML and CSS and the alignment worked as I’d expect. See here: https://jsfiddle.net/0xz68594

So I think that you’ve got some other CSS happening. Based on the <table class="table table-striped ..."> I think you’re using Bootstrap.

Bootstrap does some funny things with vertical alignment (TIL!) see here: https://getbootstrap.com/docs/4.0/utilities/vertical-align/ (make sure you look at the docs for the right version, btw).

So I added this to my bit of testing code, and vertical align stopped working. When I added the special bootstrap align-top class, vertical alignment worked again - see https://jsfiddle.net/3y7ceh4j/1/

Hope that’s helpful!

1reaction

plumdogcommented, Dec 21, 2017

Hi Michael! Really glad you’re using flask-table, hope I can help you.

Using Python’s formatting and the > and < operators adds whitespace to a string, which will the be ignored when the browser renders the HTML which is why that isn’t working. To tackle the alignment you would need to turn to CSS instead, and you can add classes to the columns in your table using the column_html_attrs keyword (and th_html_attrs and td_html_attrs).

For example (you should be able to run this file and experiment):

from flask_table import Table, Col
from flask import Flask, render_template_string

app = Flask(__name__)

class ItemTable(Table):
    colA = Col('ColA', column_html_attrs={'class': 'colA'})  # apply to both <th> and <td>s
    colB = Col('ColB', th_html_attrs={'class': 'colB'})  # apply just to the <th>
    colC = Col('ColC', td_html_attrs={'class': 'colC'})  # apply just to the <td>s

DEMO_TEMPLATE_STRING = '''
<html>
  <head>
    <style>
      .colA, .colB { text-align: right; }
      .colC { text-align: center; }
    </style>
  </head>
  <body>{{ table }}</body>
</html>
'''

@app.route('/')
def index():
    items = [
        dict(colA='1', colB='long-thing-here1', colC='1'),
        dict(colA='2', colB='long-thing-here2', colC='2'),
    ]
    table = ItemTable(items)

    return render_template_string(DEMO_TEMPLATE_STRING, table=table)

if __name__ == '__main__':
    app.run(debug=True)

Would generate HTML (for the table) like:

<table>
    <thead>
        <tr>
            <th class="colA">ColA</th>
            <th class="colB">ColB</th>
            <th>ColC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="colA">1</td>
            <td>long-thing-here1</td>
            <td class="colC">1</td>
        </tr>
        <tr>
            <td class="colA">2</td>
            <td>long-thing-here2</td>
            <td class="colC">2</td>
        </tr>
    </tbody>
</table>

with the CSS adjusting the alignment for the elements with the classes.

There’s another example about using these keyword arguments to put attributes on the <th>s and the <td>s here: https://github.com/plumdog/flask_table/blob/master/examples/column_html_attrs.py

Hope some of that is helpful, let me know if you have any other questions.