MikeDVB Posted May 12, 2009 Share Posted May 12, 2009 If you open up /whmcs/support/admin/templates/v4/style.css and add this: html { height: 100%; margin-bottom: 1px; } Just below input, select, textarea { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif; font-size: 11px; color: #666; } This will put a permanent vertical scroll bar on all screens even when they don't need it - which means that when they go from needing it to not needing it due to Ajax or vice versa - that the content doesn't jump left/right due to the extra screen space. 0 Quote Link to comment Share on other sites More sharing options...
sparky Posted May 13, 2009 Share Posted May 13, 2009 IE by default shows the scroll bar. It is only Firefox that doesn't (not sure about the others) You can use this line as well (saves making your template 100% height) html {overflow: -moz-scrollbars-vertical;overflow-x: auto;} 0 Quote Link to comment Share on other sites More sharing options...
jozeph Posted May 13, 2009 Share Posted May 13, 2009 IE by default shows the scroll bar. It is only Firefox that doesn't (not sure about the others)You can use this line as well (saves making your template 100% height) I don't understanding this issue. Is this code for both browsers? 0 Quote Link to comment Share on other sites More sharing options...
sparky Posted May 13, 2009 Share Posted May 13, 2009 I don't understanding this issue. Is this code for both browsers? I honestly don't know what mike really means by jumping around!! The css code I pasted does exactly what mike was trying to achieve with his height: 100% and No don't use both, use either 1 or the other 0 Quote Link to comment Share on other sites More sharing options...
MikeDVB Posted May 14, 2009 Author Share Posted May 14, 2009 IE by default shows the scroll bar. It is only Firefox that doesn't (not sure about the others)You can use this line as well (saves making your template 100% height) It doesn't make the template 100% it makes the <html></html> 100% (which is already 100% really, it just makes sure) Being that the <html> includes everything, the header, the body, etc it's the entire page... not just the "template". The issue that this resolves is that say when you go to one of the views that uses Ajax to show/hide something that makes the page longer than the screen - when you hide it the scroll bar disappears and the content jumps to the right 1/2 the width of the scroll bar (due to extra screen real-estate) and when you show it again the content jumps to the left again due to reduced screen real-estate due to the scroll bar. If this isn't an issue that is bothering you or something you haven't even noticed then don't worry about it. I've been a coder/designer for 10 years and a programmer for 15 so I tend to notice small things like this and they annoy me. Imagine if every time you opened your system menu (start on windows for example) all of the programs on your screen moved over so that they wouldn't be behind the start menu - it would be annoying This isn't as bad but is still there. As for your code, if it works then great either way the end goal is to have a permanent vertical scroll bar so however you go about doing, it doesn't really matter! 0 Quote Link to comment Share on other sites More sharing options...
jozeph Posted May 14, 2009 Share Posted May 14, 2009 Hmmm... Understanding now. Thanks for explanations. What exactly the code I need to use? Yours or sparky code? The HTML css need to be below that? Can I put in top of css file? 0 Quote Link to comment Share on other sites More sharing options...
MikeDVB Posted May 14, 2009 Author Share Posted May 14, 2009 Hmmm... Understanding now. Thanks for explanations. What exactly the code I need to use? Yours or sparky code? The HTML css need to be below that? Can I put in top of css file? Either code should work, what my code does is makes the page render 1px taller than the browser window no matter what so there is always a scroll bar where sparky's simply tells the browser to enable scroll bars. I haven't tested to see which one is more backwards-compatible with older browsers but either one should work for you. You can put it anywhere in the CSS, that's just where I chose to put it The thing people need to keep in mind is that this has absolutely nothing to do with the templates themselves as it modifies the overall outer-most container that contains the web site - CSS that modifies the <html> tag is pretty rare from what I've seen 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.