Email verification confirmation pop-up off-screen

[revmen]

I've placed {{> loginButtons}} in the navbar and implemented the built-in Accounts email verification system. When following the email verification link back to the site, the "Email address verified" popup appears, but it is pushed so far to the right that most of it is off-screen. Going back to the normal accounts-ui package, this popup displays normally, in the center.

[ianmartorell]

I don't know what your problem might be, just tested this with a barebones Meteor app and it works:

I suggest you do the same to see if it's a conflicting package.

[ianmartorell]

Closing for now

[revmen]

Sorry to not follow up on this. I'm back to working on this project and the problem still exists.

Screenshots showing the problem with both the email verification window and the google configuration window...

My application layout and my navbar....

<template name="appLayout">
<div class="container">
    <header>
        {{> navbar}}
    </header>
    {{> yield}}
</div>

<template name="navbar">
<nav class="nav navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">AIA Online Training</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="/about">About</a></li>
                    <li><a href="/courses">Courses</a></li>
                    {{#if userVerified}}
                    <li><a href="/group">My Group</a></li>
                    {{/if}}
                </ul>
            </div>
            <div class="nav navbar-nav navbar-right">
                {{> loginButtons}}
            </div>
        </div>

    </div>
</nav>

Output of meteor list...

accounts-google 1.0.4 Login service for Google accounts accounts-password 1.1.1 Password support for accounts alanning:roles 1.2.13 Role-based authorization email 1.0.6 Send email messages ian:accounts-ui-bootstrap-3 1.2.56 Bootstrap-styled accounts-ui with multi-... insecure 1.0.3 Allow all database writes by default iron:router 1.0.7 Routing specifically designed for Meteor jquery 1.11.3_2 Manipulate the DOM using CSS selectors meteor-platform 1.2.2 Include a standard set of Meteor packages... msavin:mongol 1.0.70 The insanely handy development package f... pascoual:pdfjs 1.0.68 PDF rendering for your Meteor applicatio... reactive-var 1.0.5 Reactive variable twbs:bootstrap 3.3.4 The most popular front-end framework for ...

edit to add that the problem happens regardless of where I place {{> loginButtons}}, even if it's in the body.

[revmen]

Solved!

The problem was with a boostrap-styling css file generated by http://www.lavishbootstrap.com/. It was causing all modal windows to be pushed right, not just those related to accounts. Removing that file solved the issue.

[ianmartorell]

Glad you solved it!