Help for adding newline in the html file of Dash

Dash Python
1

I have a big problem with my Dash app,

Basically the project is to make a dashboard, half made of graphs (left side) and the other side should display data from a table imported from an Excel file (i used Pandas for this).

This problem concerns the right side of the board, when I import data from my Excel file, they are not being displayed line by line, but instead the lines are “stuck” together.

An example :

dash
dash1855×471 23.8 KB

Here you can see in red where there should normally be a newline \n so we can see the data line by line like this :

20/01 | 17:00 | Text description here1
17/01 | 11:00 | Text description here2                                                            
16/01 | 16:32 | Text description here3

And I’ve been searching hours and I didn’t find a way to do it, given that I’m using Dash as my html page, because I believe it can be done with some framework but it would require to use a “proper” html file instead of using the method provided by Dash. I start to believe that I should chuck out everything… Some help would be very welcome, thank you.

The code so far is :

# Importation of the file
file = r".. test.xlsx"

try:
df = pd.read_excel(file)
#print(df)

except OSError:
print("Impossible to read :", file)

# Here we display the information from the file
test = []
for index, row in df.iterrows():
x = row['Date'] + ' | ' + row['Description'] + ' | ' + row['Titre de la consigne'] + ' | ' + row['Prenom'] + ' | ' 
+ row['Choix des equipements 1'] + ' | ' + row['Choix des equipements 2'] + ' | ' + row['Prenom'] + '\r\n'
test.append(x)

df_string = '\n'.join(test) # adding a '\n' at the end of each line but it doesn't change anythin
print(df_string)

And I take df_string that I my into html.P like this :

html.P(df_string)

2

Hi @BeginnerDash,

You could try adding line breaks with html.Br() at the end of each row.
Alternatively you could display your data in a dash_table.DataTable (link to the docs)

3

Thank you for the reply, but how do you automatically add htm.Br() at the end of each line ? I tried df_string = ‘html.Br()’.join(test) but it doesn’t work.

I’m going to take a look at the dash table.

4

You could use something from this post, especially the intersperse function might be useful here, with the list parameter being your test and the item parameter being html.Br().

Code snippet 
# Here we display the information from the file
test = []
for index, row in df.iterrows():
    line = row['fruit'] + ' | ' + str(row['count']) + ' | ' + row['city'] 
    test.append(line)

data = intersperse(test, html.Br())

app = Dash(__name__)

app.layout = html.Div([
    html.P(children = data)])

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

But I’d highly recommend using a datatable instead, it’s much neater and offers a lot of interactivity.

5

Thank you so much for the help ! I’ll see if I can display the same information with the same presentation with the datatable.

However do you know how to fix this :

image
image1316×169 4.56 KB

It doesn’t seem to take into account the margin, I’m trying to find a fix for it. Just to get the extra text beneath the first line in case it overflows.

Edit : nevermind it worked with the “overflow-wrap: break-word” CSS property, thank for so much for your help !

Edit#2 : Though I am trying to fix this (text should always fit in the container and be displayed fully, if it does not it shouldn’t display the line, for example here the line 12/01/22 should be automatically removed) :

image
image940×140 5.62 KB