multiple select on same page

[redimongo]

Ok so I found a small issue and that is your javascript code is make both of the select boxes the same width.

They both use the same code, but while it was working fine before I placed the gender drop down option into my form, it seems that the JS reverts to the first select object it finds? please correct me if I am wrong

the new code (gender drop down)

 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col getmdl-select getmdl-select__fix-height">
                             <input class="mdl-textfield__input" id="gender" name="gender" value="" type="text" tabIndex="-1"/>
                             <label class="mdl-textfield__label" for="gender">Gender</label>
                          <ul id="gendermenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="gender">   
                            <li data-val="M" class="mdl-menu__item">Male</li>
                            <li data-val="F" class="mdl-menu__item">Female</li>
                            <li data-val="X" class="mdl-menu__item">Indeterminate/Intersex/Unspecified</li>
                          </ul>
                        </div>

the Country dropdown html

 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col getmdl-select getmdl-select__fix-height">
                             <input class="mdl-textfield__input" id="country" name="country" value="" type="text" tabIndex="-1"/>
                             <label class="mdl-textfield__label" for="country">Country</label>
                          <ul id="countrymenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="country">     
                           </ul>
                          </div>

now the javascript loads after the the above code

it runs this JS

(function(){

select = document.getElementById('country');

    getJSON('//new.ipet.xyz/vendor/umpirsky/country-list/data/en_US/country.json').then(function(data) {
//    alert('Your Json result is:  ' + data.result); //you can comment this, i used it to debug
        //console.log("data: "+data);
        for (var p in data) {
              var ul = document.getElementById("countrymenu");
                var li = document.createElement("li");
                li.setAttribute("data-val", p);
                li.setAttribute("class", "mdl-menu__item")
                li.appendChild(document.createTextNode(data[p]));
                ul.appendChild(li);

        }
        getmdlSelect.init("#genderoption");
        getmdlSelect.init("#countryoption");
    }, function(status) { //error detection....
      alert('Something went wrong.');
    });

})();

I have isolated the problem and it is with the getmdlselect/getmdl-select.min.js it seem to change the width of the options which overrides my style. I need it to be mdl-cell--3-col

[alexbananabob]

Hello, Redimongo

Create wrap-container for each getmdl-select with class mdl-cell--3-col Like this:

<div class='mdl-cell--3-col'>
    <!-- getmdl-select here -->
</div>