Cannot remove header "Reset your password" on html document


Hi, I’m new to Meteor and trying to create my first app, but I’m having a strange problem that I can’t figure out. Whenever I run the app to test the appearance and functionality, there’s a large empty space at the top of every html document.

Here’s my index.html file:

  {{> navigation}}

<template name="main">
  <h1>Building Coordinator</h1>
  {{> yield}}
  <hr />
  <p>Created by</p>

<template name="home">
  <p>Welcome to the Building Coordinator</p>

<template name="navigation">
    <li><a href="{{pathFor route='home'}}">Home</a></li>
    {{#if currentUser}}
      <li><a href="#" class="logout">Logout</a></li>
      <li><a href="{{pathFor route='register'}}">Register</a></li>
      <li><a href="{{pathFor route='login'}}">Login</a></li>

<template name="register">
  <form class="register">
    <p>Email: <input type="email" name="email"></p>
    <p>Password: <input type="password" name="password"></p>
    <p><input type="submit" value="Register"></p>

<template name="login">
  <form class="login">
    <p>Email: <input type="email" name="email"></p>
    <p>Password: <input type="password" name="password"></p>
    <p><input type="submit" value="Login"></p>

And I don’t think that this would cause the problem, but here’s my main.js file:

    import { Template } from 'meteor/templating';
    import { ReactiveVar } from 'meteor/reactive-var';

    import './index.html';

    //router config
    	layoutTemplate: 'main'

    	//client code goes here

    	//server code goes here

    Router.route('/', {
    	template: 'home'

    //register template{
    	'submit form': function(){
    		var email = $('[name=email]').val();
    		var password = $('[name=password]').val();
    			email: email,
    			password: password
    		}, function(error){
    				console.log(error.reason); //output error if registration fails
    			} else{
    				Router.go("home"); //redirect user if registration succeeds

    //login template{
    	'submit form': function(event){
    		var email = $('[name=email]').val();
    		var password = $('[name=password]').val();
    		Meteor.loginWithPassword(email, password, function(error){

    //navigation template{
    	//allows users to logout by clicking button
    	'click .logout': function(event){

I only have this index.html file and a main.js file in the entire project. The problem persists even when I leave my index.html file absolutely blank, like so:

The “X” button doesn’t do anything, and I right-clicked it to inspect the element, which you’ll see in the above image. I know what modal does, but I have nothing in my project folder–there’s only the two files I mentioned before–so I don’t know where the problem is coming from. It seems to me that it has to do with something in the meteor source files, because I have only have the two aforementioned files in the project folder. Does anyone know how to fix this issue? I’d really appreciate any help I can get. Thanks!


Check this out:

Though, that content should be hidden by default…


Alright, thank you. I wasn’t sure why it was there, but apparently–from the link you posted–it can be hidden with CSS so I don’t have to worry about it.


Yeah, not exactly sure why it can’t be rendered only when it’s required though…