QUESTION: Get control over <head> tag

iSuslov commented 7 years ago

Hi, sorry if I missed it in the doc, but I want to set the viewport for the app

<meta name="viewport" content="width=device-width, initial-scale=1.0">

how can I do that?

Mackiovello commented 7 years ago

Hi again!

The only way to do that right now is to overload PartialToStandaloneHtmlProvider. Read more about it here: https://docs.starcounter.io/guides/network/middleware/

string html = @"<!DOCTYPE html>
<html>
<head>
    <meta charset=""utf-8"">
    <title>{0}</title>
    <script src=""/sys/webcomponentsjs/webcomponents.min.js""></script>
    <script>
      window.Polymer = {{
        dom: ""shadow""
      }};
    </script>
    <link rel=""import"" href=""/sys/polymer/polymer.html"">
    <link rel=""import"" href=""/sys/starcounter.html"">
    <link rel=""import"" href=""/sys/starcounter-include/starcounter-include.html"">
    <link rel=""import"" href=""/sys/starcounter-debug-aid/src/starcounter-debug-aid.html"">
    <link rel=""import"" href=""/sys/bootstrap.html"">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {{
            margin: 20px;
        }}
        body > starcounter-include{{
            height: 100%;
        }}
    </style>
</head>
<body>
    <template is=""dom-bind"" id=""puppet-root"">
        <starcounter-include view-model=""{{{{model}}}}"" partial-id$=""{{{{model.Html}}}}""></starcounter-include>
    </template>
    <puppet-client ref=""puppet-root"" remote-url=""{1}""></puppet-client>
    <starcounter-debug-aid></starcounter-debug-aid>
</body>
</html>";

Application.Current.Use(new PartialToStandaloneHtmlProvider(html));

I'm closing as answered, please reopen if you don't think it answers the question.

atifwaqar commented 7 years ago

@Mackiovello Thanks for your response. This worked, but I was stuck in 1 tiny thing for a while, the sequence of HtmlFromJsonProvider and PartialToStandaloneHtmlProvider matters.

            Application.Current.Use(new HtmlFromJsonProvider());
            Application.Current.Use(new PartialToStandaloneHtmlProvider(html));

If write as following, I dont see my expected results.

            Application.Current.Use(new PartialToStandaloneHtmlProvider(html));
            Application.Current.Use(new HtmlFromJsonProvider());

atifwaqar commented 7 years ago

However, it doesn't work if Launcher app is running. I suppose this should be reported as a bug?

Mackiovello commented 7 years ago

If write as following, I dont see my expected results.

Yes, that's because there will be no HTML to wrap without first having HtmlFromJsonProvider. It's explained on the page I linked.

However, it doesn't work if Launcher app is running. I suppose this should be reported as a bug?

That's interesting. Do you get any error or do you only get the template without any wrapping, like so:

<template>
 ...
</template>

atifwaqar commented 7 years ago

Do you get any error or do you only get the template without any wrapping, like so:

No errors, I get a template without any wrapping.

Mackiovello commented 7 years ago

Since Launcher is moved to the freezer and is no longer maintained, I don't think we have to worry about this. If it comes up in any other app, we'll look into it.

atifwaqar commented 7 years ago

Makes sense. Thanks @Mackiovello

Starcounter / Home

QUESTION: Get control over <head> tag #165