I need to have some help with an annoying thing.
I have an modal popup which has vertical scrollsbar inside. When scrolling inside the modal sometimes the background scrolls instead.
I have tried to add
body{
position:relative;
overflow: hidden;
}
which works fine on most of the browsers, but Safari for my iPhone still scrolls!
Please help me find how to solve this!
Regards Kristian
$('body').css('overflow','hidden');
$('body').css('position','fixed');
Did it for me.
Related
I want to lock scroll when modal is open. I add to body overflow: hidden, but that doesn't help.
I also install js lib scroll-lock that do almost same thing.
Here is a shot of that magic https://imgur.com/5bd7K55
How to lock scroll?
Fixed it by adding by additinal height: 100vh
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 am using a AutoCompleteTextField from Wicket inside of a modal window. The problem is I have it near the bottom of the window, along with a dropdownChoice.
When I select the dropDownChoice, and if it is near the top, the drop down choice will drop down as normal, but if it is near the bottom of the window it will go up. For the AutoCompleteTextField if it's at the bottom, it will still drop down, and the modal window will become scrollable to view the choice. I do not want this, how can I prevent this?
Still haven't found an answer to this, but for anyone who runs into this issue, the only simple solution I found to solve this is just to set a size limit on the div, and make it scrollable, like so:
div.wicket-aa ul { list-style:none; padding: 2px; margin:0; max-height:55px; overflow-y: auto; }
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
I created a mini-version of a site that's been optimized for the iPhone, but on one of the pages, I have a scrollbar in a container, and it shows up when looking at it on the computer, but not at all on the iphone... Is there some kind of special magic that I need or something? The css is simple:
#container {
overflow-x: hidden;
overflow-y: scroll;
}
You will have to use some javascript, such as jScrollPane, or tell users to use two fingers to scroll. There are no traditional scrollbars on the iPhone.