I'm searching a way to prevent your whole body layout to resize when a scroll bar appears to the right.
I want my body to stay at the exact same position when you switch from one html file to another, but the second one contains more content than the other, so it creates a scroll bar to the right of your browser.
The scroll bar makes my body move a tad bit to the left because it's centered. How can I prevent this using only html and css? (no scripts)
body {
overflow-y: scroll;
}
That will force the scrollbar container to be always visible, even when there's no scrollbar, keeping your content centered.
Related
This is the page in question: https://globalstudyuk.com/home-page-test/
You will see that on both desktop and mobile, there is some blank space on the right of the page.
I haven't found any solution in my code based on similar StackOverflow questions.
There should be no horizontal scrollbar, with everything filling the full width of the page.
Place the final .row inside the .container in the footer.
The negative margin on the .row is countered by the padding on the .container class.
Always useful to revisit the Bootstrap docs when things go awry:
https://getbootstrap.com/docs/4.0/layout/grid/
I had the same or very similar problem. Making the window more narrow everything seemed to resize correctly, except a horizontal scrollbar appeared at the bottom. When I scrolled with it, white-space appeared on the right side of the page.
Turns out the reason was that on the top of the page I had an element with width 100%. But under that I had another piece of text inside a PRE -section, with lines that were quite wide, wider than the resized window-width.
When I made the window more narrow the top element resized correctly but the PRE -element no longer fit into the horizontal space available, thus creating the horizontal scrollbar.
When I used that scrollbar the browser (of course) did not resize the content on the top of the page, because I was not resizing the window, only scrolling it horizontally.
Therefore the browser did not readjust the top element after the scroll to take 100% of the new visible width and therefore it could only show whitespace to the right of it as I scrolled.
So if you have this type of problem, check out if there are any DOM-elements below the currently visible ones, and whether they might be the cause of the horizontal scrollbar.
My particular problem was solved by making the PRE-section defined like this:
<pre style="width:100%; overflow-x: auto; "
> ...
Now when I make the page too narrow for the PRE-content to fit in horizontally, a horizontal scrollbar appears, but now only under the PRE-section. Scrolling it only scrolls (horizontally) the PRE-section, not the whole page. When I scroll vertically to the top of the page I don't see the PRE-section nor the horizontal scrollbar under it.
In my current markup, I have two scroll boxes in the dashboard div. I want the gray highlight around the selected task to stretch and meet the highlight around the info box to it's right. Is there a way to do that?
http://jsfiddle.net/rEKwb/2/
Thanks!
edit:
OK, this is what it looks like now.
http://img.photobucket.com/albums/v410/justice4all_quiet/what_it_do.jpg
The gray box around the green box is cut off. I'd like it to stretch to meet the gray border to the right of it, which is in a separate scroll box.
This is what I want it to look like.
http://img.photobucket.com/albums/v410/justice4all_quiet/example.jpg
There is always the space for the scrollbar, even if its not in use.
If you can force the scrollbar to the left, you will get rid of the gap on the right.
You can try changing text direction, to force the scrollbar to the left:
direction: rtl;
I think because you have your <section id="tasks"> with a style of overflow: scroll; it will create a horizontal scroll bar if you try and stretch the <div id="selected_task"> beyond its parents defined width. Basically you can't have elements that are within a overflow: scroll; ignore the scroll rule and render outside of the box... it will always create horizontal scroll bar to manage the extended content.
A workaround may be to use a jQuery scroll bar plugin and play with position:relative and z-index values of your divs sense these plugins usuall use a combination of divs to create their scroll bars and not the browsers scroll bar.
There is a cross browser dilemma especially now that safari uses an internal scroll mechanism that floats on top.
When a div with fixed height's content ends up getting larger than the div we need a scroll bar, but the scrollbar takes out some width and thus a horizontal bar is added to. How do we prevent a horizontal scroll even if the content is to wide I want no ability for the user to be able to scroll horizontally.
The CSS3 property overflow-x:hidden, still allows the user to scroll left and right with a trackpad. I want it disabled completely, or a solution that removes the problem of the vertical scroll bar taking width from the div.
Any ideas?
Marvellous
One solution is that you make the vertical scroll bar always display:
overflow-y: scroll
But still the scroll bar's width doesn't stay the same across browsers.
Or you can make a custom scroll bar replacement with div/CSS/JavaScript. Here is a jQuery plugin which seems promising:
http://jscrollpane.kelvinluck.com/
Set the image as background should fix your issues
I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.
I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.
Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/
In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.
I've tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.
Any help is much appreciated!
P.S. Stackoverflow's tag helper seems to be down at the moment, so I'm placing this under css for now since I can't think of any others.
One method is to wrap everything in a new div:
#container {
overflow-x: hidden;
min-width: 400px
}
See: http://jsfiddle.net/thirtydot/rxje6/1/
There are 3 parts to the page.
Header, which has unknown content at design time as it is populated with text at runtime. All the text must be displayed, no scroll bars.( I think height: 100% does this)
Content, the content should fill the page below the bottom of the header to the top of the footer. if there is more text in the content that can be shown, then scroll bars should be available.
Footer. Footer should be 25px high and always sit at the bottom of the viewport.
The window is a popup and it should never have window scroll bars, it can be resized but no scrollbars. The contents scroll bars should be the only one available.
The content area should resize when resizing the window, but the footer stay the same, ie fixed to the bottom.
The widths would all be 100%
Header: don't specify a height. Divs will automatically size to their content's height
Content: specify a margin-bottom: 25px to avoid being overlapped by the footer
Footer: position: fixed; height:25px
You'll have to look into ways to simulate position:fixed for IE < 7. see, for example,
How do I get a floating footer to stick to the bottom of the viewport in IE 6?
This can be a pain in the butt if you want the footer at the bottom of the window. The only way I've found to do this and make it work cross-browser is by using a dreaded table layout - and before I get my head bitten off, table layouts are frowned upon - big time.
It's easy to position the header and the content...but as far as I'm aware, not the footer so far, I've only found 2 ways of positioning the footer at the bottom of the window (as opposed to the bottom of the document which may be half way up the window for short documents), 1 uses Javascript to reference the Window.Height and the other uses tables (the frowned upon, but simple way of doing this).
Up to this point, I've yet to see a CSS that reliably does this in all browsers. I would be very interested to see a CSS that does this...