Comments (7)
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 toblock
). - 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.
from hideshowpassword.
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!
from hideshowpassword.
@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.
from hideshowpassword.
@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!
from hideshowpassword.
@tylersticka I sure can!
I'll get back to you before the day's end. Thanks in advance!
from hideshowpassword.
Works like a charm 👍
Thx!
from hideshowpassword.
@johndugan Wonderful. Thanks so much for kicking the tires. I'll merge the update into master
soon.
from hideshowpassword.
Related Issues (20)
- Auto left and right margins not inherited in Firefox HOT 1
- Wrapper margins are still inherited even when not included in the wrapper object's inheritStyles array HOT 4
- Rely more on CSS and less on JS for styles
- Split basic hide/show functionality from toggle UI
- Rendering issue when displayed on a modal form. HOT 2
- browserify require is broken when jQuery versions mismatch HOT 5
- Modernizr >= 2 and >= 3 use touchevents insted touch HOT 3
- Bower install fails HOT 5
- Can we do this with just CSS in supported browsers?
- Attach to hover event HOT 4
- Can't change button title "Show Password" HOT 2
- hideToggleUntil is not documented HOT 3
- Possibility to use existing wrapper (parent) element HOT 1
- Some of the demo doesn't work on Windows 8.1 touchscreen PC in Chrome, Firefox HOT 23
- Disable added inline styles HOT 2
- jquery dependency in wordpress HOT 2
- Keyboard focus lost on toggle in iOS Safari 12.1.2
- About this plugin, how can the focus skip the display password button after pressing the [TAB] key? HOT 1
- Configure globally HOT 5
- Classes should be in kebab-case HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hideshowpassword.