F7 elements seems to disappear when using FlowRouter


#1

Hi all,

I am creating my first ever Meteor project and it is a mobile app. I decided to use Framework7 after some researching and, hopefully, it’s the right choice.

I have a template that has a button and that template is dynamically inserted by FlowRouter. This works fine, but the button simple doesn’t appear.

This is the template being inserted:

<template name="ViewCredits">
  <div data-page="home" class="page">
    <div class="page-content">
      <div class="content-box">
        <h2>List of Credits</h2>
        <p><button class="big-button">Usual Button 1</button></p>
        <ul>
          {{#each crdits}}
            {{> credit}}
          {{/each}}
        </ul>
        <p><a href="#" class="button">Usual Button 2</a></p>
      </div>
    </div>
  </div>
</template>

This is the main template:

<template name="MainLayout">
  <div class="statusbar-overlay"></div>
  <div class="views">
    <div class="view view-main">
      
      <div class="navbar">
        <div class="navbar-inner">
          <div class="center">
            IOU
          </div>
        </div>
      </div>
      
      <div class="pages navbar-through toolbar-through">
        <div class="page-content">
          <div class="content-block">
            <header>
              {{> loginButtons}}
            </header>
            <main>
              {{> Template.dynamic template=content}}
            </main>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

I have also created a css where I set the background to a certain color. I can only see black, so maybe I am clashing with F7?

You can clone my repo to have a proper look:

Thanks y’all