Yield not staying in div or honouring its initial position.

CyberCyclone commented 2 years ago

I'm having issues with the yield statement not staying in it's assigned div.

FlowRouter.route('/', {
    action() {
        // Render a template using Blaze
        this.render('Page_body', 'Page_home', {menu: 'menu'});
    }
});

<body class="g-sidenav-show bg-gray-100">
    {{> yield}}
    <!--   Core JS Files   -->
    <script src="/assets/js/plugins/threejs.js"></script>
</body>

<template name="Page_body">
    {{> menu}}
    <main class="main-content border-radius-lg ">
        {{> main}}
        {{> yield }}
    </main> 
</template>

Basically, I need to have the statement at the root because I must have the class statements with it.

Page_body then needs to be added to the html body by the yield.

Page_home then needs to be added to the Page_body yield.

The problem is that on first render, the yield in Page_body stays within the

tag which is what is needed, but as soon as I run a different route, it pops out of the

and gets dumped at the bottom of the tag. This seems to be the case with any use case of yield not honouring its initial position.

dr-dimitru commented 2 years ago

@CyberCyclone this is Blaze issue not honoring template location on re-render; This is known issue, template won't honor its location within sibling elements; Recommended approach to always have wrapping parent element

Hope that helps

dr-dimitru commented 2 years ago

My answer looks straightforward. Perhaps it is fixed in the latest Blaze release. I'm working on compatibility release. Feel free to reopen it in case if the issue is still persists on your end.

veliovgroup / flow-router

Yield not staying in div or honouring its initial position. #91