I am a novice at html/css.
I am trying to make sure I never have a sidebar scroll -- no matter what I put in the sidebar-content-area. I prefer my layout height dimensions as I have them now (i.e. the sidebar is not full page). Is there anyway to keep the content area from overflowing....?
Here is my site (if you click on a building you will see sidebar-content-area populate...I need to put some sort of warning in html, but haven't figured out how to do that yet).
https://googledrive.com/host/0BxTGtYdXPZ8QTmdMQVk3X0hQU28/API_Updated_5_3_13.html
To avoid scrolling in your sidebar just add
#sidebarItem,
#sidebar-content-area,
#overview {
overflow: hidden;
}
to your css. This just hides your scrolling.
Related
I have on my website a sidebar that can come out from the side on mobile. It is a fixed element, which does not play nice on mobile browsers. I want to prevent being able to scroll the body of the document in order to fix this when scrolling on the sidebar div (but I still want them to be able to scroll the sidebar if there is an overflow).
Here is a video of what I want to prevent:
https://www.youtube.com/watch?v=uqWll2G2Km8&feature=youtu.be
Not sure if I'm understanding exactly what you are looking for, but I'm working on a section of a site right now that requires this type of sidebar that comes out from the side of the page. At first it was doing exactly the same thing for me as well, where the body would scroll while I was scrolling the sidebar content. After some testing it seems whether position: fixed or position: absolute, the only time the page allows me to scroll the side bar and not the content is when I set the
.main-sidebar-container { position: fixed; bottom: 0; }
There are other styles in there as well, but that bottom: 0 seems to be the key to allowing the side bar to scroll while not scrolling the body. I know you don't need to scroll your side bar but maybe setting your main-sidebar-container to bottom: 0 will help in this situation as well. I'll let you know if I come across any other findings as I continue with my own project. Good Luck.
A workaround I found was that if the sidebar is currently active, use JS to set the html height to 100% and overflow to hidden. Not sure how good this is in practice, though.
I am working on a site with a header at the top and a main content area. The header does not scroll but the main area does. This means that I have a scrollbar to the right of the main area but not to right of the header and they do not line up:
In this image the red bar is the content and the orange bar is the centre section of the header that should be in line with the content.
These are both aligned using this css:
.center-content {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
What is the best approach for this?
I was thinking of just adding the scrollbar permanently but I don't really want to do this. I could then just add some padding to the left of the main section to re-center it. Alternatively I could add padding to the right of the header.
Questions:
How would I change the style of the header based on wheather the main section has a scrollbar?
How would I add padding to the main section based on wheather it has a scrollbar?
How to I get the width of the scrollbar? Is this guaranteed to be the same across all browsers (I need to cater for mobile as well)
I have created a JSbin for this that demonstrates the issue.
I am using the material-design-lite style sheets for this.
You will not want to change any styles based on the scrollbar - I think that's too complicated and it would almost certainly involve javascript. Scrollbars are also not consistent across browsers/mobile. A better option would be to fix the header to the top of the page, and make the content div's margin-top equal to the header's height. Then the scrollbar, when it appears, will be to the right of the entire page. See an example here:
http://output.jsbin.com/xuroyaceli/#
Resize the window to see how it looks with a scrollbar.
I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.
In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like
overflow-y: scroll;
and if I add
width: 100vw;
It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.
You have couple of solutions:
You can show your scroll permanently and style it accordingly to be a part of your page:
html {
overflow-y: scroll;
}
You can add:
padding-right: 40px;
as 40px is what I have heard is the max scroll size that you can get.
Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.
You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.
You can use media queries to tackle the problem.
When making a site that doesn't require scrolling, the content is centred. I have placed all page content within a div : #Pagecontent, which has its margins set to auto so that the width of the screen does not matter - the content is always in the centre.
However, when the page requires scrolling because of the length of the content, all of the content on the page shifts slightly. How can I prevent this, as I find it annoying.
Hope this is an okay question. Cheers!
you can show the overflow all time by css overflow:scroll so the page wont move on the scroll bar
The HTML with overflow: scroll will force the page to always show the scrollbar whether it needs it or not.
html{
overflow:scroll;//for both vertical and horizontal
/* overflow-y: scroll; // for only horizontal
overflow-x: scroll; // for only vertical */
}
But there is no way you can prevent scroll bars appearing on any normal site because it is 100% dependent on the visitors screen resolution and/or preference for a maximised window or not.
The only way to prevent scroll bars shifting your page contents is to disable them via javascript, which may make some of your page unreachable by some visitors
Good read: How to prevent scrollbar from repositioning web page?
I am using a fixed width layout for a website (1000px), with the layout being centered in the screen by auto margins. However, I find that on some pages on the website, the layout is positioned slightly different than other pages for some reason. This is surprising to me, because I use Django and serve the same base template and stylesheet to each page, so I would expect them to look the same.
For example, take a look at http://crh.vkuzo.com/. If you load the "home" and "suggest" pages, the layout stays exactly the same. However, if you load the "about" page, you can see the layout move slightly to the left.
What is causing this slight movement, and how can I get rid of it?
P.S. here is the relevant CSS for the container div (at least what I think is relevant):
#wholepage {
width:1000px;
clear:left;
margin-top:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
It is the browser's scroll bar. See: How to prevent scrollbar from repositioning web page?
Add this style:
body {
...
overflow-y: scroll;
}
For centered pages, you want the scroll-bar to be always visible (even when it's not needed). That way the page won't shift horizontally depending on whether the scroll-bar is visible or not.
The scroll bar is adjusting the layout. When the scroll bar appears on the browser window, it minimizes the width by a certain amount of pixels (the width of the scroll bar itself).