BlazeLayout rendering content to a dynamic template, but the content is appearing at the bottom of the document

Question

I am attempting to render a template via FlowRouter and BlazeLayout.render() to a dynamic template. That dynamic template exists inside a Bootstrap container div. When the content is rendered, however, it is appended to the bottom of the DOM in a div id'd as "__blaze-root", outside of my Bootstrap container and therefore breaking my page layout.

My route:

 /*Public Routes*/
    FlowRouter.route( '/', {
        action: function() {
            BlazeLayout.render("mainLayout", {area: "main"})
        },
        name: "public"
    });

Template to be rendered:

<template name="mainLayout">
    TEST CONTENT TO BE RENDERED
</template>

And the page and dynamic template, named main, where it should be rendered:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Arena v.01</title>
</head>

<body id="mainPageBackground">
    <div class="container">
        {{> Navbar}}
        <div class="row">
            <div class="col-md-4">
            {{> Template.dynamic template=main}}
            </div>
        </div>
        <div class="row">
            TEST #2
        </div>
    </div>
</body>

What I am seeing, however, is the "TEST CONTENT TO BE RENDERED" text appears at the bottom left of the page, unconstrained by the bootstrap "col-md-4". Post-render source provided below as an example.

...
  <div class="row">
    <div class="col-md-4">
             <---- This empty column div is where I would expect the content to render.
    </div>
  </div>
  <div class="row">
     TEST #2
  </div> 
</div> <--- This is the end of the <div class="container">
<div id="__blaze-root">TEST CONTENT TO BE RENDERED</div>
</body>
</html>

Would someone be able to shed some light on why my rendered template is not appearing where the rendered template should appear? Thank you in advance!

My current Meteor package list:

accounts-password            1.1.4  Password support for accounts
aldeed:autoform              5.8.0* Easily create forms with automatic insert and update, and automatic reactive validation.
aldeed:collection2           2.6.0* Automatic validation of insert and update operations on the client and server.
aldeed:simple-schema         1.5.0  A simple schema validation object with reactivity. Used by collection2 and autoform.
blaze-html-templates         1.0.1  Compile HTML templates into reactive UI with Meteor Blaze
ecmascript                   0.1.6  Compiler plugin that supports ES2015+ in all .js files
es5-shim                     4.1.14  Shims and polyfills to improve ECMAScript 5 support
ian:accounts-ui-bootstrap-3  1.2.84  Bootstrap-styled accounts-ui with multi-language support.
jquery                       1.11.4  Manipulate the DOM using CSS selectors
kadira:blaze-layout          2.3.0  Layout Manager for Blaze (works well with FlowRouter)
kadira:flow-router           2.10.0  Carefully Designed Client Side Router for Meteor
meteor-base                  1.0.1  Packages that every Meteor app needs
meteortoys:allthings         2.3.1  Insanely Handy Development Tools
mobile-experience            1.0.1  Packages for a great mobile user experience
mongo                        1.1.3  Adaptor for using MongoDB and Minimongo over DDP
session                      1.1.1  Session variable
standard-minifiers           1.0.2  Standard minifiers used with Meteor apps by default.
tracker                      1.0.9  Dependency tracker to allow reactive callbacks
twbs:bootstrap               3.3.6  The most popular front-end framework for developing responsive, mobile first projects on the web.

I have found *a* solution, though I am hesitant to mark the problem as self-resolved until I have input on whether or not it is the accepted solution. In client/index.js I have: `BlazeLayout.setRoot('#test');` And I made the following change to the div containing my dynamic template. `
{{> Template.dynamic template=main}}
` So is this the only way to get it to work, by manually changing the BlazeLayout root? What if I have two dynamic templates and I want to rendered different content into each one? — Scott, Dec 15 '15 at 22:01

score 0 · Answer 1 · answered Dec 15 '15 at 22:22

Okay. So this was me not understanding how BlazeLayout worked. My solution was to set the BlazeLayout root to a main div containing a master layout, and then inside that layout template I organized my dynamic templates. This fixed both my issue with content rendering at the bottom of the DOM as well as being limited to a single dynamic template by setting the BlazeLayout root to the div containing that single dynamic template.

index.html

<body id="mainPageBackground">
    <div class="container">
        {{> Navbar}}
        <div class="row">
            <div class="col-md-4" id="test">
                {{> mainLayout }}
            </div>
        </div>
    </div>
</body>

index.js

BlazeLayout.setRoot('#test');

mainLayout.html

<template name="mainLayout">
    {{> Template.dynamic template=test}}
        <br>
    {{> Template.dynamic template=main}}
</template>

<template name="content">
    CONTENT HERE!
</template>

<template name="test">
    TEST HERE!
</template>

At this point my content is rendered into the correct area of the page and I can render multiple dynamic templates from one or more FlowRouter routes.

BlazeLayout rendering content to a dynamic template, but the content is appearing at the bottom of the document

1 Answers1