I am developing a website in asp.net; and on this page is the collapsable panel control installed from ajax. My question is, when i open the panel (in which there is a few labels) the scroll bar appears on the side of the page, and the page shifts. This looks unclean. I was wondering if there is a way to prevent the scrollbar from appearing.
Thanks in advance!
If you are talking about disabling the browser scroll bar you can add overflow-y: hidden to your html element in css.
Caution - this will disable scrolling on the website.
If you want to prevent from appearing and disappearing a scrollbar you can just enable it to be always there.
html {overflow-y:scroll}
It should help with the effect of moving site to the left or right depending on scrollbar appearance. Hope it helps.
Related
I'm developing a website. I have a button that I want to be fixed in the right-bottom corner. The problem is, in mobile browsers, it gets covered by the navigation bar:
The bar sometimes hides while user is scrolling. Can reappear again.
This happens both on Android/Chrome and iOs/Safari.
Is there an elegant way to script the element so it would always be displayed in full and stuck just in the corner of the shown part of the website?
I think the mobile browsers does hides the bar when it is scrolling down and shows it when you scroll up.
Maybe move the location of the button when scrolling up with JS or something.
I am trying to implement an off canvas menu in my Wordpress site. Instructions on coding the menu are taken from this site:
http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html
The problem is that when you open the menu and the mouse is on the menu I cannot scroll the site contents beneath the menu. This is specially important in the mobile version since the menu takes much of the space on the screen so being able to scroll the site contents is very important.
So basically I want the menu to not be scrollable, but the site contents should always be scrollable whether the menu is visible or not.
I fixed it using the javascript fixes mentioned here:
A way to scroll an underlying div when mouse is on top of a fixed div?
#howard-e Thanks for taking the time to look at this.
I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
I'm developing a website and on its home page I have some sliders.
When I use these sliders I used to get horizontal scroll. I managed to fix that using overflow-x:hidden; at the css for the body element.
My problem is that When I click and drag the page to the right the scrollbar doesn't appear, but the user have the same effect as if he was using the scrollbar.
I received the html/css from a third part front-end developer and I'd prefer not to have to modify his css much.
Would you have any tips to fix this behavior without having to do further changes in the html/css structure?
Thanks in advance for any help.
I cannot figure out why, but on certain pages like:
http://www.serif.cz/folio.htm
the menu shifts just a bit to the left of where it appears on the rest of the site:
http://www.serif.cz/
I have compared the HTML and it looks exactly the same.
Any ideas?
Its the scroll bars. Firefox and Chrome do not display scroll bars unless the content actually needs to scroll. IE will display a disabled scroll bar if the content does not scroll.
You can add a disabled scroll bar to pages that do not have content long enough for a scroll by using the following CSS:
body{overflow-y:scroll;}
Or you can just kind of accept the fact that it's going to do it on those pages. It's just one of those things where it makes sense why it's happening, it's just annoying. :)