Expandable buttons (on hover) - adds additional width issue
On a site Iím working on, I have various buttons which are displayed as icons, when the buttons are hovered over the text slides out. Then returns to its collapsed state when the user moves off the button. I thought I had this working but when I added more buttons which had longer text in them, I noticed a problem, there seemed to be additional width added the longer the text was.
As I donít know what the length of the expanded button will be, I need to animate to width: auto, so I used Darcy Clarkeís fix for this.
Here is my example page (Tried to add it to CodePen but it didnít seem to function correctly):
Also at the minute, when you hover over a button all of them will open (quite handy for this demo/test actually), as I couldnít get just the child of the item hovered over to trigger ;)
As you can see on the very bottom button it looks as if it works fine but when more text is added, so is additional width Ė and I canít figure out where its coming from! Even removed all padding from the buttons and the issue still occurred.
Additional Notes: In the CSS/JS the reason I have an initial width of 1px set on the span is because í0′ worked in everthing (even IE7) aside from Safari, which needed a width on the inline-block element to work.
I've tried removing the custom font, letter spacing & reduced the font size in the CSS but still the issue remains. Even with 0 padding on everything, I'm not sure why its calculating the width wrong?
It must be in the script? If I remove "inline-block" from the span using firebug, the text displays as it should expanded. But then again, hovering over the buttons which triggers the script then displays the extra spacing :s
|All times are GMT +1. The time now is 05:42 AM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.