Cannot remove header "Reset your password" on html document


#1

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:

<body>
  {{> navigation}}
</body>

<!--Templates-->
<template name="main">
  <h1>Building Coordinator</h1>
  {{> yield}}
  <hr />
  <p>Created by matt@touchpointcrm.com</p>
</template>

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

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

<template name="register">
  <h2>Register</h2>
  <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>
  </form>
</template>

<template name="login">
  <h2>Login</h2>
  <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>
  </form>
</template>`

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
    Router.configure({
    	layoutTemplate: 'main'
    });

    if(Meteor.isClient){
    	//client code goes here
    }

    if(Meteor.isServer){
    	//server code goes here
    }

    //routes
    Router.route('/', {
    	template: 'home'
    });
    Router.route('/register');
    Router.route('/login');

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

    //login template
    Template.login.events({
    	'submit form': function(event){
    		event.preventDefault();
    		var email = $('[name=email]').val();
    		var password = $('[name=password]').val();
    		Meteor.loginWithPassword(email, password, function(error){
    			if(error){
    				console.log(error.reason);
    			}else{
    				Router.go("home");
    			}
    		});
    	}
    });

    //navigation template
    Template.navigation.events({
    	//allows users to logout by clicking button
    	'click .logout': function(event){
    		event.preventDefault();
    		Meteor.logout();
    		Router.go('login');
    	}
    });

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!


#2

Check this out: https://github.com/ianmartorell/meteor-accounts-ui-bootstrap-3/issues/171

Though, that content should be hidden by default…


#3

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.


#4

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