I created an html page for facebook it's height is 650px and turned off Auto Scroll but it shows vertical scroll bar.
Just because the content fits within the standard canvas height doesn't necessarily mean that the scrollbars won't appear. The scrollbar will also appear if the width overflows the canvas (520px).
The following doesn't apply in your case but based on your title others may find it useful. The fan page canvas height can be changed by using the JavaScript SDK -- specifically FB.Canvas.setAutoGrow or FB.Canvas.setSize.
Add a selector too the fan page div.
<div id="myfanpage">
</div>
then add this css to your stylesheet:
#myfanpage{
margin:0;
padding:0;
overflow:hidden;
height:650px;
}
That will completely disable scrollbars and make your div exactly 650px in height!
Related
I am currently helping a friend with a very simple, responsive 1-page site which can be viewed here.
If you drag your browser window down to about 450px in width or less, you will see that the layout changes which is correct. However, when you drag vertically to make the page shorter, the content in the middle gets hidden/covered.
I need for the text in the middle to always be visible, even if the user needs to scroll/swipe to see it. NOTE: It is the whole body that I would want to scroll, not just the content div.
In this image, you can see that the text is covered if the viewport isn't very tall:
On the div that contains the main content, I have tried setting height and min-height as well as using !important to no avail.
I must be missing something obvious. Any help is appreciated.
Set the div named "content" the style: "overflow-y: scroll;"
<div id="content" style="overflow-y: scroll;">
<!-- content -->
</div>
body {
overflow-y: scroll;
}
Updated to be the whole document.
I've created a website with a content-width of 800px.
However, when my user uploads a picture with a width of 900px, the site is totally out of order.
Is there a way to add a slider or scrollbar instead of the div getting bigger, when the images are too large for the website? If not, I think I have to resize the uploaded images..
Thanks in advance.
put style="overflow:auto;" on your div then it will produce a scroll bar when image is larger than your space
I assume that because you're talking about width, that you're wanting the content width to maintain at 800px and then default to scroll if content (in this case an image) is > 800px.
Perhaps you could take advantage of the overflow-x: scroll; property in CSS to only scroll horizontally. overflow: auto; may add the vertical scroll as well when not required.
You may need to supply a little bit of the code that you are using so we can figure out the problem, but what you could use is:
overflow: hidden;
That will stop anything being wider than your 800px content container.
My page layout looks something like this:
<style type="text/css">
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="content-wrap">
</div>
You'll notice that the content-wrap div shifts its position a tad bit when the vertical scrollbar appears. One scenario is when the browser starts to progressively render the page without displaying the vertical scrollbar, then determines that a scrollbar is needed because the content is taller than the "fold". This shifts the div about 10px towards left.
What is the best way to tackle this problem without forcing the browser to always display the scrollbar?
I'm afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the "available area" shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with half the width of the scroll bar, thus shifting the centered content somewhat to the left.
A possible solution might be to calculate the margin with JavaScript instead of using margin: 0 auto; and somehow compensate for the "lost" pixels when the scroll bar appear, but I'm afraid it will be messy and the content will probably move a little bit anyway while you calculate and apply the new margin.
If your site is "responsive" (reacts to width):
Step 1: Add width: 100vw to a wrapper element. This makes it as wide as the viewport, ignoring the appearance of a scrollbar.
Step 2: Add overflow-x: hidden to the content element. This will remove the horizontal scrollbar (created when vertical scrollbar appears, to allow the user to "look under" it).
"wrapper element" is in our case referring to another div around your #content-wrap
Will work for your case too, tested:
<style type="text/css">
body {
overflow-x: hidden;
}
#wrap-wrap {
width: 100vw;
}
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="wrap-wrap">
<div id="content-wrap">
</div>
</div>
Make sure nothing useful on your page is wide enough to get caught under the scrollbar.
For example, you can ensure that the sum of (horizontal padding + border + horizontal margin) of the content element is wider than the scrollbar).
If your site is fixed width + centered (your case):
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
This will add a left margin equal in width to the scrollbar when it appears. Which is 0 when it does not. Taken from here, but tested.
You must use:
html {
overflow-y: overlay;
}
Only supported by WebKit (Safari) or Blink (Chrome, Opera)
Use jquery and put this in the start of your tag:
<script type="text/javascript">
function checkheight(){
if ($(document).height() > $(window).height()) {
//that is if there is vertical scrollbar
document.getElementById('yourcenteredcontainer').style.paddingLeft='8px';
//8px because the scrollbars are (?always?) 16px
}else{
document.getElementById('yourcenteredcontainer').style.paddingLeft='0px';
}
}
</script>
and call the function checkheight(); in the end of your tag plus wherever you have onclick (or other) events that make the page longer or shorter in height.
If you can use Javascript, you can set the width of the content-wrap to the inner width of the window minus the standard width of a scrollbar.
You will run into some problems though.
The user will have to have Javascript enabled
You don't know what the width of the vertical scrollbar is, especially if the scrollbar isn't there! So you will have to guess. 20px seems like a good guess.
Different browsers have different ways of telling you want the inner width of the window is.
So if you can live with all that, you can do something like this (in pseudo code)
if window.innerWidth is defined :
set the width of the div to window.innerWidth-20px
else if we're running on Internet Explorer :
set the width to document.documentElement.offsetWidth-20px
otherwise :
we're out of luck and we best leave the width as is.
First I would recommend optimizing the HTML so that it won't take so long to load/render. If load/render is fast the scrollbar won't appear "too late". What is it that takes long to load/render? Check the network tab in chrome debug tools (F12). Do an audit in Chrome debug tools.
There are multiple things that could make the document "reflow", and the scrollbar appear even though the browser could have known the necessary measurements right from the start. Are you using tables for layout - don't! They may need multiple passes of rendering. Do you have images without width/height specified? Then the document will need to be rerendered when each image loads. Specify <img ... style="width: ..px; height: ..px">. Is the CSS sane and efficient?
If you can't get load/rendering speed down I think your best bet is to not use the browser's scrollbar if javascript is enabled. That way you can control it and place it absolutely positioned so that it won't affect horizontal positioning.
Let your slider start of with display: none. Monitor dom ready event as well as image load events as well as window resize events. When the page has been loaded, images have been loaded and when window gets resized just run the same function every time. It would determine if the scrollbar is needed and either display it or hide it.
You could use JQuery UI Slider for example and set it's maxValue to $(document).height() - $(window).height(), monitor the slider change event and then scroll the body to the value of the slider and so forth.
If javascript is disabled the fallback will be the regular scrollbar and there's nothing you can do about the slight horizontal shift then.
But really I think the problem of the horizontal shift is too small to spend time fixing with a custom scrollbar, and check that it actually works well on all platforms etc. Do HTML/CSS optimizations first.
You can try this solution: https://stackoverflow.com/a/67213174/14302216
But the widths can't be relative. Probably, width:100vw will work for the parent, but I'm not sure how you would set the child width. I'm afraid calc(100vw-16px) will not work. But if you can set like widht:800px for the child, it will be fine!
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).
I have a DIV section with the css
#all_messages{
position:inherit;
overflow:auto;
height:100%;
width:100%;
}
I want to make it scroll inside the page which i did with the overflow but i don't want an extra scrollbar on the page, i would like native browser's scrollbar to control that not one scrollbar just for that section
Ok so in the picture you can see i have two scrollbars i want to remove the inner scrollbar and have it controlled by the browser's native scrollbar
I think what you want to do is make all the other elements on the page position:fixed. If the content in the remaining section overflows, the browser bar will appear automatically. You must also remove the overflow:auto property from that div, so that it won't create an inner scroll as well.
Use overflow: hidden. This will restrict it and not show any scroll bars.