I added the facebook Like button to my website and am having an issue. When the Like button is clicked, the box that pops up doesn't overlay the other content like it does on most websites, instead creating a vertical scrollbar in the container (expanding it).
This issue actually exists on facebook's own website:
https://developers.facebook.com/docs/reference/plugins/like/
If you scroll about half way down the above page and click the Like button, the same issue happens:
The only difference there is that they have overflow set to hidden, instead of auto.
How can this be fixed?
Add to your CSS file:
.fb-like{overflow:hidden;}
This should solve the problem.
Related
In my page, I have a modal that opens when a button is clicked. But it looks wonky because two scrollbars show up:
The css I used: https://codepen.io/bootpen/pen/jbbaRa?editors=1100
I want it to have only the scrollbar for the modal when the modal is open and switch back to the parent scrollbar when closed. I tried doing it with overflow-y: hidden, but that disables scrolling instead.
What am I missing here?
Its not showing me two scrollbars when I see your project on Codepen
I think there is a problem with your Browser
There is a div. In this div has a chat. This div has scroll bar. I want to take a screenshot of all this div content at once. I almost did it by changing the div height to 500% and overflow: visible, but I got a problem. In fact I got about a large part of the chat in the screenshot, but at some point the chat just disappeared with a long white space till the end of the image as shown below.
I took this screenshot using the Firefox's "Screenshot node" feature. And I tried all possible extensions you can imagine before it and none worked (they don't detect the div scroll, just the main page scroll). Anyways, I want a HTML/CSS solution if possible. I want to understand why it is not working.
As you can see, there a lot of white space, but there is a lot of more chat that was ignored by the print.
What could have happened?
You can use FastStone Capture if you want to get a screenshot of a scrolling window or anything with scroll bars. Use the Capture Scrolling Window <Ctrl + Alt + PrtSc> in manual mode.
I am using this example and copied the same exact code but for some reason my page has a gap between the top of the page and the sidebar as shown in the picture.
I tied absolute and fixed positioning. The height in css is already set to 100%.
What do I need to do to close that gap ?
Without looking at the actual html/css it's hard to guess what the problem is, however from the small strip of bookmarks in your screenshot it looks like you are using Chrome browser which will allow you to "Right Click -> Inspect Element" on the sidebar.
This will let you adjust the css properties live in the browser, from here if you click on the "Computed" tab you will be able to see all the CSS properties that are affecting the div.
I would recommend looking at the margin, padding and top property of the div.
I am using this:
http://www.useful-dates.com/search/
What script do I need to use so that the scrolled underneath scrolled div stays hidden and then appears when you click it and disappears when you click outside of the appears div?
Like this, but i have had no luck duplicating:
http://rob-bell.net/static/ddlist.html
Iv searched and tried all kinds of things on the net and no luck, please help.
Something has to be there in the background to catch the click. Looks like they used display: block with a fixed height/width in the working example, so that a click outside the drop-down would hit the "body" element, to which the event is attached.
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right