I meet this issue on mobile viewport only.The Facebook Like button create a pop-up when user hit it, the problem is on mobile viewport the width isn't enough and the pop-up is being cut off. I want to hide it and I followed the same issue here but it take me to another problem:.
This problem should be handled by css is the best solution, I can't handle more on html and javascript.
Related
I have in my web app a login modal with a form of two fields. When user moves between the fields, the page auto scroll and move the modal. I’ve checked all the similar questions and have been trying all suggested solution but no one suits. Because of top navbar in the background being scrolled too (although it’s position=sticky) I’m guessing it’s and accessibility feature which I’ve wondered how to disable. Tip will help!
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.
I have a series of scrollable divs on a page. When a DIV gets scrolled to say the top and the user keeps scrolling it starts to scroll the page up instead (not so much on Firefox) but on Safari and Chrome it does.
This is annoying, and I notices that on Facebook, the activity monitor, friends online and chat window do not do this. If your mouse is in the div the you can only scroll that div not the page when you reach the top or bottom.
How have they done this?
Marvellous
Facebook use a custom scrollbar instead of those that come with the browser (at least, for the friends online sidebar).
Custom made controller = custome made control. :)
I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.