Retaining white spaces in html.Td()

Dash Python
1

Hi,

I am brand new to Dash and have been using it for a couple of days. I couldn’t find what I needed on the internet, and the documentation is still not fleshed out as Dash is still pretty new.

I hope the community can help me!

In order to learn the ropes, I am building a small dashboard that generates some code for me, but I am loosing my indentations. It looks like html.Td() is stripping away all white spaces.

Here is my input: two lists containing an input and output variable.

image

After submitting, I generate the code and store it in a dataframe.

image

I am using the variable ‘Indent’ as a flag variable. I am trying to add 4 white spaces to make the indentation:

return html.Table(
	[html.Tr(
		[html.Td('    ' + df.iloc[i]['Codeline'])] if df.iloc[i]['Indent'] == 1 else
		[html.Td(df.iloc[i]['Codeline'])]
	) for i in range(len(df))]
)

But here is the result:

image

I tried adding the white spaces directly in the dataframe, but they disappeared when I displayed them in the dashboard. That’s why I tried adding it when generating the table rows with html.Td(), but they still go away. I also tried using the HTML whitespace character   but it was a complete disaster. :slight_smile:

I don’t know how to fix this. Does anyone have any tips?

2

Got a partial solution - it displays correctly, but when I copy/paste it, it’s no longer valid code since it doesn’t include the css-padding I added.

Here is my code:

return html.Table(
	[html.Tr(
		[html.Td(style={'padding-left': '15px'},
				 children=df.iloc[i]['Codeline'])] if df.iloc[i]['Indent'] == 1 else
		[html.Td(df.iloc[i]['Codeline'])]
	) for i in range(len(df))]
)

Here is the result in my Dash application:

image

Really want those 4 white spaces! :slight_smile:

3

Aaaaaand, I solved it. I was very close. Just added white spaces in the data-frame and used the CSS-property white-space : pre, like so:

return html.Table(
	[html.Tr(
		[html.Td(style={'white-space': 'pre'},
				 children=df.iloc[i]['Codeline'])] if df.iloc[i]['Indent'] == 1 else
		[html.Td(df.iloc[i]['Codeline'])]
	) for i in range(len(df))]
)

Thanks for the help, everyone! Oh wait, that’s right! I solved it by myself because I’m awesome. :smiley:

1 Like