I'm using wordpress lightbox plus plugin: http://www.23systems.net/plugins/lightbox-plus/
And it's working well but the problem is when viewed on google chrome, scrollbars appear on the lightbox overlay image.
Here's the link:
http://goo.gl/2Yy9L
Note: click on the 3 mini images at the bottom [ this is where lighbox plus is applied]
On the div with id cboxLoadedContent you have overflow-x and overflow-y set to auto. The content doesn't quite fit. You can either make the content fit in its container thus avoiding the scrollbars or you can apply overflow: hidden which will dispose of scrollbars entirely. Of course some of the image could be hidden. It looks good though so I imagine it is just a pixel hor/vert and won't be missed.
Related
I am looking for a CSS solution to implement the exact behavior of "overscroll-behavior: contain" but for when the target element has no overflow.
I have a page with a pop-in sidebar/menu that, on mobile, takes up 100vw and 100vh (minus bottom navigation bar) and does not overflow (there is not enough content to need scrollbars). Currently when this sidebar is open on mobile, if the user tries to scroll it, the main page in the background scrolls, which in this app can result in unwanted database calls due to lazy loading/infinite scroll.
Here is a minimal codesandbox demo:
On line 55 of demo.js I have added the overscrollBehavior: "contain" property to the JSS, but as you can see, it does not contain the scroll chain, unless you shrink the vertical height of the browser to force the content of the sidebar to overflow first. (On Chrome the overscrollBehavior seemed to have the expected behavior in the codesandbox editor, but not when popped out in its own window.)
Surely there is a CSS solution to get this behaviour without the element having to be scrollbable first?
Interestingly, on Firefox at least, if you shrink the vertical height to force scroll on the side bar, once you resize the browser back to normal, the overscroll-behavior property continues containing the scroll chain until you refresh the page, which is the behaviour I'm looking for, though obviously on initial page load.
Here is a simple codepen showing the difference in overscroll-behavior for elements which do and do not overflow, if it's not already clear. I also found another post on the CSS Tricks forum from 2018 of someone asking about this behaviour, but with no solution.
I am building a Chrome extension which inserts an iframe onto the screen when activated. I have set the CSS property to hidden. The scrollbar is displaying during the animation (both ways), and it immediately disappears after the animation.
The animation wipes or scrolls the iframe onto the screen from the bottom edge of the browser window.
I am aware that the seamless property was removed from iframes in HTML5.
How can I prevent the scrollbar from displaying during the animations?
Fixed by doing the following in javascript after creating the iframe.
iFrame.scrolling = 'no';
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
So Bgiframe is a huge lifesaver - we have used it to tackle the IE PDF issue where is would hide our css dropdown menus. However, we have run into an issue - our css menus have a max height, and once that height is filled, they begin to use a scrollbar within the menu (think the Facebook notifications). bgiframe does an excellent job making sure that the menus themselves appear in front of the PDFs in IE, but the scrollbars in the menus do not - they and they alone are still hidden. We have inspected the elements to make sure that the menus and the bgiframe are the same, correct width, and they are - but the scrollbar is still hidden. This might be a bgiframe issue or an IE rendering issue, not sure. Nowhere - and I mean nowhere - have we been able to find anyone else with this kind of problem. Anyone have any ideas?
Use jscrollpane instead of the browser default scrollbar. Also, make sure bgiframe covers the scrollbar area explicitly.
How could I get my top sticky nav to remain on top of my youtube embed on IE 7?! I have a long vertical scrolling site, which I've conditioned to work in IE7 - BUT, there is a youtube video in one scroll section, and when you scroll passed it, it goes over the top sticky menu?
Do I need to wrap a div around it, and assign a 9999 z-index to it?
For every site I've ever been on, the Youtube play always stays on top of the other elements. Assigning 9999 z-index won't solve the problem.
The only solution would be to make the Youtube Flash Player stay behind other elements - check the Youtube help on that to see if you can change any settings.