Callback-generated HTML element is not visible (0x0px)

Dash Python
1

Hi! I’m attempting to simultaneously update the href and title of a html.A element by passing the element whole-cloth through a decorated function to a html.Div container. This method mostly works as expected, but with one major issue: the generated HTML component has a size of 0x0px. Manually passing style information with the component doesn’t appear to help.

Here’s what the container looks like:

            html.Div(
                [],
                id='external-link',
                className='five columns'
            )

And here’s what the function call looks like:

@app.callback(
    dash.dependencies.Output('external-link', 'children'),
    [dash.dependencies.Input('selected-listing-cache', 'children')]
)
def generate_external_link(index_id, site_name):  
  output = html.A(
    title='View this item on on ' + site_name
    href= generate_url(index_id),
    target= "_blank",
    style={'height': '50', 'width': '50', 'font-size': '12'}
  )
  return output

And the output:

29%20PM

19%20PM
Screen Shot 2018-07-11 at 5.50.19 PM.png1032×124 24.8 KB

2

It might help to add

'display': 'inline-block'

or

'display': 'block'

to the style properties. Let me know if that works!

3

Thanks for the suggestion! It turns out that I just needed to add a children property to the html.A element. Otherwise, the function call was just producing a set of empty tags! Doh :slight_smile:

html.A(
    title='View this item on an external site,
    children='This text will appear between the <a> tags',
    href=generate_url(index_id, site_name),
    target= "_blank" 
)
4

Glad you figured it out! :slight_smile: