Show/hide password with materialize css is crashing responsive input - forms

Question

I'm using a form with materialize css. I have a link with my login project here: http://clients.paulofrutuoso.pt/login.html I want to put a show and hide password in the form. I'm using this example: https://github.com/cloudfour/hideShowPassword
And I have this CSS for the icons
::-ms-reveal,
::-ms-clear {
display: none !important;
}
.hideShowPassword-toggle {
background-color: transparent;
background-image: url('../images/wink.png'); /* fallback */
background-image: url('../images/wink.svg'), none;
background-position: 0 center;
background-repeat: no-repeat;
border: 2px solid transparent;
border-radius: 0.25em;
cursor: pointer;
font-size: 100%;
height: 44px;
margin: 0;
max-height: 100%;
padding: 0;
overflow: 'hidden';
text-indent: -999em;
width: 46px;
-moz-appearance: none;
-webkit-appearance: none;
}
.hideShowPassword-toggle-hide {
background-position: -44px center;
}
.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
border-color: #0088cc;
outline: transparent;
}
This is the html:
<div class="container clearfix">
<div class="container-app-club">
<div class="row">
<div class="col s5 right-align"> <img class="responsive-img " src="images/palmeiras.png" width="130" height="130"> </div>
<div class="col s2 center-align"><hr class="vertical"/></div>
<div class="col s5 left-align"> <img class="responsive-img " src="images/app-brasao.png" width="130" height="130"> </div>
</div>
</div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label class="active" data-success="Campo Obrigatório">E-mail</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password-1" type="password" class="validate">
<label class="active" data-error="Campo Obrigatório">Senha</label>
<div class="form-error">Campo obrigatório</div>
</div>
<div class="col s12 right-align"> Recupere sua senha! </div>
</div>
</form>
</div>
<div class="col s12">
<button class="btn btn-w waves-effect" href="preencher-cpf.html">Login</button>
</div>
<div class="col s12 center-align" style="margin-top:15px;"> Ainda não está registado? Cadastre-se </div>
</div>
And I have this JS in the html:
$('#password-1').hidePassword(true);
The icon is on the right end of the form and it toggles just fine but the size of the input doesn't shows in responsive way. The icon crashes the input responsible design.
Any ideas to solve this?
thank you so much.

Answer 1

Done. I just add this css code:
.hideShowPassword-wrapper{
position: relative;
display: inline-block;
vertical-align: baseline;
width: 100%!important;
}
.hideShowPassword-field{
margin: 0px;
padding-right: 0!important;
}