Currently, my project is running on Meteor version 1.6.1.1. Instead of using the accounts-ui package, I have opted for ian:accounts-ui-bootstrap-3. As part of customization, I have included a custom field as a <select> element in the code.
Here's how it appears on the screen:
https://i.sstatic.net/fBRGY.png
While inspecting the HTML code, I noticed that the attribute class="form-control" is not being added to the select tag.
Displayed below is a snippet from Chrome's element inspection tool:
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
The goal is to dynamically add the class form-control to the select tag when the component loads on the screen, achieving a look similar to the image linked below:
https://i.sstatic.net/WSpzC.png
I attempted the following code implementation, but it did not yield the desired outcome:
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});