bug in firefox about hideshowpassword

[alexander-akait]

fixed

#user_pass {
    display: inline-block;
}

Firefox return display:inline, if display not set in styles; Chrome return inline-block

[alexander-akait]

old information about default styles https://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm

[alexander-akait]

need set inline-block to element in js on input

[tylersticka]

Hi @evilebottnawi,

The wrapper will, by default, inherit the display property of the targeted input element. This is to insure the style of the <input> is not disrupted more than necessary by the introduction of the wrapper. The only downside to this approach is that everything will be mimicked, including browser inconsistencies.

Setting the display of the <input> (as you already have) is the recommended solution, because it's the simplest way of insuring the element is styled consistently across platforms.

You can also customize this behavior by specifying an array of properties for the wrapper to inherit, like so:

$('#example').hideShowPassword({
  wrapper: {
    inheritStyles: [
      // 'display', // omitting due to Firefox inline issue
      'verticalAlign',
      'marginTop',
      'marginRight',
      'marginBottom',
      'marginLeft'
    ]
  }
});

You can read more about the plugin options in the README.