I have a position:fixed sidebar on my site on the left with other content to the right. On a desktop browser, when you zoom in, all page content scales appropriately as you would expect. But if you pinch to zoom in on iOS, the content on the right slides underneath the fixed sidebar. The sidebar zooms in size but is always fixed to the edge of the screen. Now I noticed with Safari on Mac when you pinch to zoom in, that's not the case - it appears to revert to static positioning because the sidebar may not be fully visible - it doesn't get fixed to the screen. That's the desired behavior I want on iOS. Is there some way I can do that, besides trying to detect scale changes and manually changing the style to absolute/fixed? Thanks!
Related
I have a modal that has a horizontal scrollbar when the modal is resized on small screens. When that horizontal scrollbar appears, the vertical scrollbar disappears because it is stuck to the right. I would like the vertical scrollbar to stay at the right side of the modal while I scroll horizontally to the right. A picture of this behavior is show below. I want the vertical scrollbar stuck on the right while I horizontally scroll to the right rather than only being present when I finish horizontally scrolling to the right.
Is there a way to accomplish this? I believe another issue is that on Windows devices the scrollbar takes up space unlike in Mac devices.
You can customize the scrollbar a bit (see https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp), however, I don't know if you can change the position.
I did find a javascript scrollbar-plugin, which I haven't tried, but maybe it is worth a try? You can find it at https://grsmto.github.io/simplebar/.
We have a wide image (a colour palette) that doesn't fit on mobile, so we placed the image in a container with horizontal scroll bar. It works everywhere except for iOS and Safari. When the user starts dragging from a clickable area of the image using these browsers, the container doesn't scroll. However, when the user starts dragging from a non clickable area, the container scrolls properly. If I remove the map completely, the container scrolls fine as well.
Is there a workaround for this bug? Or we need to replace the implementation with SVG or absolutely positioned elements on top of the image?
We ended up with absolutely positioned divs on top of the image and it works great.
I've a image wrapped in a scroll. below is a screeshot.
I've used elevate zoom js to zoom into the image while hovering on it. below is a screenshot
But the problem occurs when scrolling the image. the elevate zoom also keeps scrolling along with image. Below is the screenshot.
I wanted to know to how to fix the postion to the scrolling window itself using some jquery.
I face the following issue when using the latest Vaadin version.
I have a grid w/ some columns. I resize the browser window in a way to make the horizontal scroll bar appear.
After that i move the scrollbar to the rightmost position.
After that i maximize browser window and then minimize it back.
And after that step the horizontal scroll bar disappears.
is it a bug in vaadin or anything else?
Thank you.
Is there a jquery plugin or other script that makes an element stay at the same scale and position (like fixed) on mobile browser, no matter where the page offset is or how much the viewport zoomed. e.g. create a tab-bar like footer that is fixed to the bottom of the screen, even if the web page is not mobile optimized (The viewport scale is not configured at the header section or in the css).
Thanks