Search code examples
cssmeteormeteor-blazemeteor-accounts

Add class to ian:accounts-ui-bootstrap-3 SELECT tag when rendered [Meteor JS + Blaze]

Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.

What I get on Screen is as below.

enter image description here

When I saw the HTML code, it is not adding class="form-control" to select tag.

below is the code when I inspect element on UI using Chrome.

<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>

All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;

enter image description here

I have tried below code, but it is not working;

Template.HomePage.onRendered(function () {
    document.getElementById('login-state').classList.add('form-control');
});
Solution

  • Well, I tried one way to achieve this is by using Template event as below,

    Template.HomePage.events({
    'click #login-dropdown-list': function(event){
        //document.getElementById('login-state').classList.add('form-control');
        $('#login-state').addClass('form-control');
    }
});

    As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.

    Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.