I'm having a little problem with my ASP .NET site on Ipad Safari. I have the following form:
A div overlayed on top of the main form.
In this div I have an update panel with 4 or 5 drop down lists.
Each drop down list when changed will pull some data from DB and populate certain gridview on this same div.
On PC using Chrome, FF, IE..., my site works great. But on Ipad Safari, I have this weird problem:
After user changing a drop down list, there is a chance that the clickable area of all elements will drift upward from the elements's actual position.
For example, when I click on a button, nothing happens, if I want to use that button, I have to click an empty area a few dozen pixel above it. The same goes for textarea, radio button,...
The amount which all clickable area drift upward does not seem to be fixed, some time they drift up hundreds of pixels, while other time they only drift up a dozen pixels or so, but all clickable area always drift up by the same amount.
Zoom in/zoom out on the page or select any textbox will reset all clickable areas to their right positions.
I'm using .NET Framework 4.5, and testing on a Ipad using IOS 8.3. Unfortunately, I can't reproduce it using js and html alone.
I finally found the answer for this strange issue. Apparently, when I scroll up and down on the overlay div, I might also scroll the main form by accident. If I scroll the main form together with the overlay div, when I click on the drop down list and populate the gridview, all clickable areas on overlay div will drift up. The more I scroll my main form, the more the clickable areas drift.
I fix this issue by adding the following function to onclick event of all drop down list:
function fixClickableDrift() {
$(window).scrollTop(0);
}
Now matter how much I scroll my main form, when I click on the drop down lists, this function will reset main form's position back to the top of the page. Hope this will be helpful for someone in the future.
Related
I have been having issues with using the ScrollToAsync function of a ScrollView when running on Android, not tested on iOS yet.
I'm using Xamarin.Forms version 2.5.1.444934 using .Net Standard
Testing on the Android Emulator (8.0, API26) and a Google Pixel (8.1 API27), both have the same issue.
I use NavigationPage and Navigation.PushAsync to move between pages (therefore have navigation bars on every page).
I want to create an auto populate field control, the user types in the first few letters and I look up the results in a database / static list of string and display the results below for the user to click/tap.
I have this working using a composite control (the contents of the frame marked interesting below).
The problem I have is scrolling the view to show the results.
My page has this layout hierarchy:-
ContentPage
StackLayout
ScrollView
StackLayout
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
Frame (the interesting one that deals with scrolling)
StackLayout
Heading Label
StackLayout
Label x:Name="ScrollToLabel"
Entry x:Name="ScrollToEntry"
Grid x:Name="ScrollToGrid"
Entry x:Name="Hidden" Text="I should stay visible as you type"
/StackLayout
/StackLayout
/Frame
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
/StackLayout
/ScrollView
StackLayout
Button Text = Done
/StackLayout
/StackLayout
/ContentPage
When the user clicks/taps in to ScrollToEntry, the keyboard opens and pans the control to above the keyboard (ok so far).
When the user starts typing in ScrollToEntry, the code populates ScrollToGrid with up to 5 results.
At this point I want to make sure that the grid results are visible for the user to tap on.
I have tried 2 different options, ScrollToAsync(ScrollToLabel, Start) and ScrollToAsync(Hidden, MakeVisible).
Neither work as I would like 100% of the time.
ScrollToAsync(ScrollToLabel, Start)
If the ScrollToEntry is at the bottom of the screen, the navigation bar is hidden and the view pans up too far.
The ScrollToLabel is now off the top of the screen.
When the second letter is clicked/tapped, the Navigation bar is restored and the scroll scrolls correctly, ScrollToLabel at the top of the screen.
If the ScrollToEntry is near the top of the screen, the navigation bar is not hidden and it scrolls correctly.
ScrollToAsync(Hidden, MakeVisible)
This is my preferred option because it would only scroll as far as needed to display all the results (not all the way to the top).
This works even worse than the first one.
In most cases, it does not scroll at all, I assume it thinks it already visible but is actually behind the keyboard?
If it does scroll, the label Hidden is still not displayed (I tested with both a HeightRequest="0" version and a visible version, both the same result).
I tried using the below code to change the adjust to resize.
Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
2 issues,
1. Because it resizes, the Done button now is above the keyboard, taking up space.
2. When clicking the hardware back button (not the done or navigation back button) the previous view now has a white space where the keyboard was.
If using the done or navigation back, the screen initially appears with the white space but then refreshes to full screen.
I have created a sample app that highlights the issues (by default using pan, not resize).
It's the most simple version of the layout I'm using...
Am I doing something wrong or is this just how it works? If its how it works, this must be a bug? If I'm doing it wrong, can someone tell me what or suggest a different way of doing it?
I´m working on a tool only for tablets (Android, iPad) based on Cordova and jQuery Mobile (1.4.5). In the first phase of this tool, many of the users who have to work with it were asking for some more comfort regarding the behavior of the form popups.
The problem was:
As a user came to one section, I provided him with a collapsible-set, consisting of sub-sections. In this sub-sections, the user gets data-grids with Add, Edit and Delete buttons next to each data-set.
So, as the user tapped on Edit button (or Add), I opened up a popup with the necessary form and form-elements to edit this data-set or add new data to the database. But in many of the upcoming popups the amount of the form-elements is as high, so the popup appears higher or even much higher then the collapsible-set (including the data grid) behind the modal popup is.
The popup of jQuery Mobile is centered by default and even if I positionTo origin and pass x and y coordinates to it, the library/widget wants to position the popup to this coordinates by the center point, rather then the upper left corner.
Users always had to scroll around to come to the start point of the form and after submitting the form, they had to scroll up again to where they tapped on the button to open the popup.
Now I tried to do everything I could imagine, to force the popups top position to 20 pixels below the top position of the visible area on the tablet, regardless of where I am, when tapping on any Edit or Add button.
I was playing around with offset() (window.pageYOffset), etc. and set the position of the popup by:
popup2open.popup('open').css({'top':popupTopValue+'px','left':popupLeftValue+'px'});
In fact, the popup is positioned to exactly where I want it, if the top offset is between 0 and 100. On all values above 100, the top position of the popup increases by absolutely incomprehensible value. The only consistent fact is, that the more I scroll down before I tap on a button, the more this value increases - so it does not in/decrease by random.
(BTW: I found out that I have to set "popupLeftValue" to 0, so the popup is positioned in the center horizontally.)
I just can´t see any regularity on increasing value...
Can anybody give me a hint or a punch to the right direction?
Thank you in advance!
PS: I experimented also with .css({'position':'[fixed|absolute]','top':popupTopValue+'px','left':popupLeftValue+'px'}); and that worked well. Only to find out one show-stopper: If I set the focus to an input-field inside the form and than closing the virtual keyboard on the tablet, a reposition-event is triggered and by this, the popup is re-positioned massively below the former position (in fact around 300 pixels below and just marginalized to the right border of visual area). The Cancel and Save buttons are even out of scroll-able area.
(some more funny fact, btw.: if I set the focus to the same input-field, than not closing the virtual-keyboard but directly setting the focus to a select element and after this pressing the back button of the tablet to escape the select menu, no reposition-event is triggered...!?)
On 18th of July 2013 Gabriel Schulhof added this line to a feature-request from one user, who asked exactly for what I´m struggling around with:
"We are indeed considering adding such a feature..."
I am writing an application where I need to move a view from top to bottom but only when user moves it downward. To move this view I have a button below the view to drag. So initially I place the view beyond top of the view i.e. with negative margin equals the height and only the drag button is visible at the top to user. I see that this works perfectly on Lollipop and view is just at the position where bottom of view matches the top of screen. When I try it on Kitkat and lower versions, the view goes more towards top than the edge of screen. I have this everything in a RelativeLayout.
To show that view is dragged downward I am manipulating bottomMargin and topMargin properties on view.
Has anyone came across similar problems? Thanks in advance.
I've developed a static advert ticker that sits at the bottom of the window. This is in an <iframe> to make it easier for other people to place the unit on their sites. Another <span> around the <iframe> keeps it fixed to the bottom of the screen. The script has a help window which is within a tag - within the <iframe> and uses the visible / hidden property to show or hide text.
Now since the code is in an <iframe>, the help text would not appear on main window. To get around this, I made the <iframe> larger,and set it to transparent.
Visually, everything is fine. When the user clicks a button on the ticker, the help menu appears over the data in the background. However, I've just discovered that if there is a link on the main page that passes under the <span><iframe> section, it cannot be clicked. I've tried CSS pointer-events, but can't get that to work, (links within the <iframe> must also remain clickable)
Not sure which is causing the "fault", ie the <iframe> or the tag around it. Is it a security thing to stop "click jacking" (??) or more to the point, is there a work around.
If push came to shove, I COULD reduce the size of the <iframe> and use a javascript pop-up window to display help text, but those windows show the URL and status windows, and are not exactly elegant!
Here is the code before anyone asks:
This span covers the entire screen to the height of the underlying <iframe> I did this so the data could be centred
<span style="position:fixed;bottom:10px;display:inline;width:100%">
<center>
<iframe src="http://www.xxx.com/cgi-bin/ticker/run_tick.pl?s=xzy" frameborder=0 align=top width=800px height=330px marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no allowtransparency=true></iframe>
</center>
</span>
Set a height to the span the same as the iframe (330px)
Let me know how that goes
Oh boy, what FUN I've had getting this to work!! (Twelve hours on Wed 23rd, and about three hours today)
Originally, I had an <iframe> that filled virtually 3/4 of screen, (so that I could display the help window to uses in a '' rather than use a modal popup. But, for security reasons, the browsers will not let you click through text that covers links underneath.
I had to literally redesign the whole layout.
Now, I have the help file in a separate <span> window which has its visibility set to hidden till user needs it. But that still left the ticker code at the bottom.
I had to divide that into three <divs> one on either side of the main ticker. But again, the ones on the side are effectively masking the page underneath, so I had to set both <divs> so that they used "pointer-events:none" meaning the <div> was not clickable, and mouse events would pass through to the code underneath. The mid section for the ticker was set to the opposite, namily "pointer-events:auto" so that the TOP window got the clicks, but not the page underneath.
Next problem: Because the ticker shows graphics that extend into the main text, that left a 1/2" area where clicks on main page couldn't be accessed. Another span was added to the code which covered the area with a transparent gif. When the user places their mouse over this graphic, a swap takes place and displays a semi transparent checkerboard. They can then read what this means in the help file.
Finally, when user's click the minimize button, the <div> holding the ticker code is hidden (giving accesss to all the links on the page) and ANOTHER <div> displays "Restore" graphic. When they click that, it gets hidden whilst the main ticker window - and the two <divs> on either side are made visible again.
And it was only meant to be a simple script!! (Oh, and don't check the website or my blog 'cos I won't be uploading the changes till eve of Sat 26th)
I have a ReorderList on my page and it works just great, but...
Now, I have almost 100 items that I'd like to be able to reorder and they flow off the page, even at 8pt. When dragging, the page does not scroll as I approach the bottom (or the top) so I have to drop my item, scroll down, then drag some more. When I drag and drop in Word, as I approach the bottom of the window, the window scrolls so I can move to where I want to drop.
Alternately, it would be fine with me to have the items show up in multiple columns - their width would allow at least 3 columns. But none of the CSS solutions I have found which allow a <ul> to have multiple columns seem to work as they require multiple <ul>s which I don't think I can do with the ReorderList control.
Any ideas?
Here is an idea: Check if the left mouse button is being hold down, and also check for the position of the pointer on the page. If the coordinates are down at the bottom of the page at a position that you think is down enough for the page to be scrolled, then you could use the window.scrollBy() Method, and stop it when the Mouse button is released. You could also set a bool value when a Reorder item is clicked and while the button is down, and set it to false when it is released, and again the same idea, check for the position of the pointer.
Sample window.scrollBy()
Good luck!