SlideDown () does everything in folding
I am currently creating a simple menu that has multiple service names and the user can click on one and jQuery will display the appropriate paragraph describing it below. My jQuery code is fine and does exactly what I want, however I have one bug that I have yet to iron out.
Whenever I click on one of these headers and it displays the description, everything in the page wrapper is shifted to the left by about 7px in Firefox, this does the same as Google Chrome, but I didn't measure amout, but I of course , it does not matter.
Anyway, I use the slideToggle () command to show the hidden paragraph. My guess is that this is because when the slide-dj happens, it somehow changes the width of everything and "margin: 0 auto"; setting the wrapper rule in my css compensates for this change. Anyone can somehow fix this problem? I tried several other fixes that I found on the internet, but to no avail.
This is what my code looks like, I put it on a jsFiddle to make it easier to browse: http://jsfiddle.net/vcH7m/ Feel free to edit it there if you like, or post what needs to be fixed here. Which is more convenient. Thank you for help!
a source to share
This change is most likely caused by the vertical scrollbar. If the page gets too large, the vertical scroll bar will appear and expand the paragraph width slightly to the left. You can see this in the first paragraph of this jsfiddle when you reduce the browser viewport to 1000x600.
To fix this, you may want to consider the position of the fixed vertical scrollbar.
html {
overflow-y: scroll;
}
a source to share