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!