Raw html as value of component

Dash Python
1

Hello,

Is it possible to easily insert content (children of a dash component) with raw html embedded?

I’m trying to insert raw html into a <td> html component. In particular, my use-case is to display text that has embedded '\n' characters as paragraph separators.

I tried to replace \n with <p></p> with no luck, and was only able to implement by replacing the text with the dash components required to split the sentences and intersperse with html.P's. While this works for this simple use-case, there can be others cases where simple raw html may be useful.

This example below shows the case of: (1) text with \n embedded, (2) text with \n replaced with <p></p>, and (3) [work around] converting the text into dash components:

from more_itertools import intersperse
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'
})

app.layout = html.Div([
    html.Button('Submit', id='button'),
    html.Div(id='output')
])

content1 = 'This is sentence 1.\nAnd this is sentence two.\nFinally three.'
content2 = 'This is sentence 1.<p></p>And this is sentence two.<p></p>Finally three.'

def make_content_with_paragraphs(content):
    cwp = html.Div(list(intersperse(html.P(), content.split('\n'))))
    return cwp

@app.callback(
    Output('output', 'children'),
    [Input('button', 'n_clicks')])
def output(n_clicks):
    if n_clicks % 3 == 0:
        return 'Example 1: (embedded "\\n"): ' + content1
    elif n_clicks % 3 == 1:
        return 'Example 2: (embedded "<p></p>"): ' + content2
    else:
        return html.Div(['Example 3: (converting to dash components): ', 
               make_content_with_paragraphs(content1)])
    
if __name__ == '__main__':
    app.run_server(debug=True)

Thanks.

2

Sometimes the dcc.Markdown component can be helpful in the text is simple (e.g. new lines). As a last resort, you can use the dash-dangerously-set-inner-html component to render raw html GitHub - plotly/dash-dangerously-set-inner-html: Dash component to dangerously set inner raw HTML

2 Likes
3

Is there a way to add a callback to an element created by DangerouslySetInnerHTML?

4

There is not, only the top level properties of dash components can be inputs of callbacks

5

Thanks for the quick reply!

The reason I was asking is that I am trying to use Materialize CSS framework with Dash. For checkboxes, it needs the label text to be inside a span as seen below:

<label class="" style="display: inline-block; margin-right: 8px;">
    <input type="checkbox" class="" value="on">
        <span>
            <!-- react-text: 62 -->Checkbox Label<!-- /react-text --> 
        </span>
</label>

However, the HTML that is generated by Dash using dcc.Checklist is (without the span):

<label class="" style="display: inline-block; margin-right: 8px;">
    <input type="checkbox" class="" value="on">
        <!-- react-text: 62 -->Checkbox Label<!-- /react-text --> 
</label>

Is there a way to get the label text to be inside a span? I could make a very hacky solution with some custom JS, but is there a better way?

Thanks!

6

You could write your own checklist component: Build Your Own Components | Dash for Python Documentation | Plotly and pull out the code from the open source Checklist