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.

Passing meta tags to <head> and <footer>

See original GitHub issue

I raised this on the community forum here when I wanted to add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> to the <head> of my app.

I noticed the <head> section gets defined by the index() function and so created a subclass of Dash to add the tag above.

class Dash_responsive(dash.Dash):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    #Overriding from https://github.com/plotly/dash/blob/master/dash/dash.py#L282
    def index(self, *args, **kwargs):
        scripts = self._generate_scripts_html()
        css = self._generate_css_dist_html()
        config = self._generate_config_html()
        title = getattr(self, 'title', 'Dash')
        return ('''
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
                <title>{}</title>
                {}
            </head>
            <body>
                <div id="react-entry-point">
                    <div class="_dash-loading">
                        Loading...
                    </div>
                </div>
            </body>
            <footer>
                {}
                {}
            </footer>
        </html>
        '''.format(title, css, config, scripts))

app = Dash_responsive()

More generally, I propose app should have a head() and footer() function to add extra tags to either section which would get added to index()

Issue Analytics

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

Top GitHub Comments

2reactions

amarvincommented, Jun 21, 2018

This would be wonderful! I’m trying to add this meta tag into my Dash apps: <meta http-equiv="X-UA-Compatible" content="IE=edge">

My Dash app will be deployed as an Intranet app, IE11 must be supported, and the company’s IE11 compatibility view settings make all Intranet pages render in compatibility mode. This compatibility mode leads to some JavaScript libraries to not load correctly (e.g. it thinks react.min.js has “Expected identifier, string or number”). Adding this meta tag would prevent IE11 from using compatibility mode when rendering the Dash app. More info on https://stackoverflow.com/q/25557299/6068036.

0reactions

T4rk1ncommented, Oct 12, 2018

Can add meta tags from #265