Nyxynyx Nyxynyx - 6 months ago 80
Node.js Question

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

After installing

bootstrap-3
and
accounts-ui-bootstrap-3
, the
ui-accounts
login widget did not appear when
{{ loginButtons }}
is used. Instead a
<div>
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


main.html

<body>
{{> header}}
</body>

<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>
</button>
<a class="navbar-brand" href="#">My Bootstrap 3 App</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li>{{ loginButtons }}</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
</template>


Output of {{ loginButtons}}

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


enter image description here




Update



Misaligned
{{ loginButtons }}


enter image description here

Properly aligned example in docs

enter image description here

Answer

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.