Skip to content

Passing meta tags to <head> and <footer> #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
radumas opened this issue Nov 30, 2017 · 5 comments
Closed

Passing meta tags to <head> and <footer> #170

radumas opened this issue Nov 30, 2017 · 5 comments

Comments

@radumas
Copy link

radumas commented Nov 30, 2017

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()
@chriddyp chriddyp mentioned this issue Nov 30, 2017
Closed
@chriddyp
Copy link
Member

chriddyp commented Jun 8, 2018

A broader proposal for this in outlined in #265

@amarvin
Copy link

amarvin commented Jun 20, 2018 •
edited
Loading

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.

@chriddyp
Copy link
Member

Thanks for reporting @amarvin ! That seems like it might even be a tag that we should include by default.

@amarvin
Copy link

amarvin commented Jun 21, 2018

That'd be perfect!

@amarvin amarvin mentioned this issue Jun 21, 2018
Closed
@T4rk1n
Copy link
Contributor

T4rk1n commented Oct 12, 2018

Can add meta tags from #265

@T4rk1n T4rk1n closed this as completed Oct 12, 2018
byronz pushed a commit that referenced this issue May 21, 2019
@Marc-Andre-Rivet
204 NO CONTENT regression fix (#170)
4744414
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this issue May 28, 2021
@alexcjohnson
Merge pull request plotly#170 from plotly/mdn-update-yari
d0dafd3 
Update component generation
HammadTheOne pushed a commit that referenced this issue Jul 23, 2021
@alexcjohnson
Merge pull request #170 from plotly/mdn-update-yari
5faa83e 
Update component generation
@00Phillipn 00Phillipn mentioned this issue Oct 10, 2024
Open
@tcotidiane33 tcotidiane33 mentioned this issue Oct 11, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@chriddyp @T4rk1n @radumas @amarvin