Removing Inline Width On Wrapper

[johndugan]

Hi Guys,

Thanks for making this great little plugin! One small issue I have is the inline width on the hideShowPassword-wrapper div. What would be the best way to make the wrapper fluid when using the second example?

Thx!

[tylersticka]

Hi, @johndugan! Glad you like it. 😃

The wrapper will only set an overt width if its width is not the same as the target input element. If the input field is fluid before you call $.hideShowPassword() on it, it should remain fluid after.

I made a pen demonstrating this a bit more clearly (resize your browser to see the values update... or in the case of the inline style output, not update).

If all of that looks correct and the wrapper is still getting a width set, there are a few possibilities:

• Something in your CSS styles are not allowing for 100% width (for example, you have not set the element's display property to block).
• The wrapper div has been given extra styles that impact the width by another CSS selector (.parent div, for example).
• You are using Zepto and haven't set the input to box-sizing: border-box (see this section of the README for more info and solutions).

If none of these are the culprit, I'd love to see some code so I can troubleshoot a bit more deeply. It may be worth adding some sort of setting for turning this on and off in the future.

[johndugan]

Hey @tylersticka thx for responding so quickly. While I did have width: 100%; defined in my reset, the inputs were all display: inline-block;. The reason is so I can change top aligned labels to left aligned labels by changing one property, width. After I changed the reset to display: block; the problem was fixed. Any chance the inline width property could be omitted when the width is 100%?

Thanks again for the help!

[tylersticka]

@johndugan Thank you for replying! I can reproduce the issue now, and it seems specific to <input> elements with display: inline-block; and percentage widths. I'll look into a solution for the next release.

If you need a short-term fix, you might try grabbing the source file and commenting or modifying the offending lines to suit your project.

[tylersticka]

@johndugan Thanks for your patience!

I attempted to figure out a way for the wrapper to intelligently handle inline-block elements with percentage widths. Unfortunately, I ran into some difficulty with that, as there isn't a great way of getting the original percentage width of an element without some nasty spelunking through chunks of CSS strings.

My "Plan B" was to add a new option, wrapperWidth. It accepts the following arguments:

• true - The current behavior. The width of the wrapper will be set to the computed width of the element if they differ.
• false - No width will ever be applied by the plugin.
• (some other value) - This will be applied directly to the width of the wrapper.

In my own tests, I was able to remedy the issue of a percentage-width inline-block element by setting wrapperWidth to 100%...

$('#password').hideShowPassword({ innerToggle: true, wrapperWidth: '100%' });

...or by setting it to false and managing the styles with CSS alone.

Any chance you'd be able to try the version in the wrapper-width branch to see if this option alleviates your issue?

If so, I'll feel more confident pushing this as a 1.0.3 update.

Thanks again for your help!

[johndugan]

@tylersticka I sure can!

I'll get back to you before the day's end. Thanks in advance!

[johndugan]

@tylersticka

Works like a charm 👍

Thx!

[tylersticka]

@johndugan Wonderful. Thanks so much for kicking the tires. I'll merge the update into master soon.