Nyxynyx Nyxynyx - 1 year ago 128
Node.js Question

Meteor's accounts-ui-bootstrap-3 {{loginButtons}} not displaying

After installing

, the
login widget did not appear when
{{ loginButtons }}
is used. Instead a
is found in its place but no widget is visible.

Are there additional steps that is missing for the widget to be displayed?

Adding Bootstrap 3 packages

mrt add bootstrap-3
mrt add accounts-ui-bootstrap-3


{{> header}}

<template name="header">
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#">My Bootstrap 3 App</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li>{{ loginButtons }}</li>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->

Output of {{ loginButtons}}

<div id="login-buttons" class="login-buttons-dropdown-align-right"></div>

enter image description here


{{ loginButtons }}

enter image description here

Properly aligned example in docs

enter image description here


To whoever finds this and wonders why this is happening, the solution is pretty simple. Just remove the standard accounts-ui package from meteor by typing meteor remove accounts-ui. Apparently the standard package overrides the CSS classes of the bootstrap-3 styled accounts ui.