I've created a div that lays on top of the body with a higher z-index. When I try to scroll the content on the div it just scrolls the body content in the background. Can someone please explain this phenomenon? Thanks!
Use two-fingered scrolling to navigate divs with scrollbars on iOS devices.
[Update] Reference: http://support.apple.com/kb/ht1484
Related
I am using iframe-resizer for cross domain application, The Iframe loads fine in desktop and andriod devices but on my Iphone, I am facing below issue:
The bootstrap modal pop ups on Iframe app is hiding and flickering behind when I scroll on page.
I tried
-webkit-overflow-scrolling: touch;
on container of Iframe but that does not work.
Any help/suggestion will be highly appreciated.
We fixed the issue by using position:absolute instead of position:fixed
Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.
Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.
It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.
my problem is that I have a lot of AbsolutePanels in GWT an they are drawn as if they were a TabLayoutPanel ( the GUI looks like a TabLayoutPanel, however, it is not one, it is made of a lot of AbsolutePanels ).
So, now I have the problem that as soon as a lot of tabs are opened they exceed the max. width of the AbsolutePanel and so they cannot be seen anymore nor can they be clicked or anything else.
So, is it somehow possible to add a ScrollBar to this AbsolutePanel in order to scroll back and forth?
I do not think it is a good idea to post any code because everything is being done programmatically. The only thing that I would need is an example of how to accomplish a scrollbar within an AbsolutePanel. This AbsolutePanel is of a fixed width!
Thank you very much for your help in advance.
Use CSS Overflow property.
You just need to set overflow: auto;.
It can be done programmatically:
panel.getElement().getStyle().setOverflow(Overflow.AUTO);
or with CSS style sheet:
.overflowAuto {
overflow: auto;
}
and
panel.addStyleName("overflowAuto");
I have noticed that this new horizontal scroll bar at the bottom which I am unable to remove. I have attached an image in which i have also clearly marked the scroll bar which i am talking about. I know there is canvas setting in app settings but that is for the scroll bars above this one. When i scroll the marked scroll bar to the right the chat & notifications also get scrolled something which didn't use to happen before.
This is a reported Facebook API bug: http://developers.facebook.com/bugs/182748101891780
You can add to the "fb-like" attribute data-width="100px" (or whatever width you like) and it solves this issue.
Found the problem to be this element from FB ui, in the right column:
<div style="width:246px; height:69px; " class="_56vv _56vw" id="u_0_j">
It's the Recommended Games block, which has a carousel inside it. It should have a overflow:hidden in CSS. Tried to access it from my app via javascript, but FB blocked it.
This is the solution I used since this issue was making me crazier.
I use Stylish to customize Facebook, and I have a style installed that blocks all the useless crap on that site, i.e. friend recommendations, ads, unused navigation items on the left, etc.
All I did was find the DIV that holds the entire right sidebar and disabled it. This effectively got rid of the scrollbar and centers the main content within the middle DIV.
Here's the line I added to Stylish:
#rightCol {display:none;}
And just for your reference, here's the whole list I use for Facebook:
.rightColumnWrapper {display:none;}
#navHome{display:none;}
#pagelet_ego_pane {display:none;}
#pagelet_friend_list_suggestions {display:none;}
#appsNav {display:none;}
#pagelet_ticker {display:none;}
#fbSidebarGripper {display:none;}
#pagelet_welcome {display:none;}
#rightCol {display:none;}
.groupMemberSuggestionsList{display:none;}
.groupRecommendationsList{display:none;}
Hope this helps if you haven't already found a solution.
Can anyone help me out in creating a scrollable textarea which works on iPhone?
Want to do it using HTML, CSS and Javascript.
A textarea on the iPhone is scrollable by default but requires two fingers to be scrolled.
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.