Gary_Nelson
asked on
Ipad safari cuts off html lists and pdfs
I have an asp.net application that generates reports in several formats (html, pdf, xls). All other browsers present them fine, except for ipad safari. I only get the top of the report, that is to say, what appears on the page. There appears to be no way to scroll down to see the rest of the report. Is there something in the configuration of the ipad that will make the rest of the report available? The html is just a table of data, and the pdf is just a normal pdf. (I don't have excel installed on the ipad, so I don't know what happens in that case).
Vavatch1
In my experience, asp.net code often does not create fully compliant HTML and Safari, especially on iOS, is less forgiving. Either validate the code using http://validator.w3.org or another validator, or try an alternate browser on the iPad, such as iCab or Opera.
ASKER
<<In my experience, asp.net code often does not create fully compliant HTML >>
The HTML in question is not created by ASP.NET. It is just a table with data in it that I create by code. I found that by draging two fingers up the page I can get it to sloooowly scroll down the HTML. But I still haven't figured how to get it to scroll down the PDF:
The HTML in question is not created by ASP.NET. It is just a table with data in it that I create by code. I found that by draging two fingers up the page I can get it to sloooowly scroll down the HTML. But I still haven't figured how to get it to scroll down the PDF:
So, does that mean you are trying to load all the data in the report in one go? Remember, the iPad only has 256MBs of memory for the OS, Safari and very little left for the data in a web page.
Try paginating the data, preferably using AJAX for usability and quick initial load. You could do this simple with good old-fashioned Next Page/Last Page buttons, but I found inspiration in the Bing Image Search which catches the scroll event and fetches the next page of data asynchronously adding to the output.
Take a look: http://www.bing.com/images?q=cat
This works really well with thumbnails and would surely work even better with tabular formatted textual data.
Try paginating the data, preferably using AJAX for usability and quick initial load. You could do this simple with good old-fashioned Next Page/Last Page buttons, but I found inspiration in the Bing Image Search which catches the scroll event and fetches the next page of data asynchronously adding to the output.
Take a look: http://www.bing.com/images?q=cat
This works really well with thumbnails and would surely work even better with tabular formatted textual data.
ASKER
I discovered the problem with html. The table was enclosed with a div. On any other browser the div appeared with scrollbars to the right to scroll through the content. Apparently that doesn't work on the ipad. By removing the div I can now scroll normally through the whole table. Actually I was able to get a table with over 2000 lines to load.
I still haven't solved the problem of the PDF.
I still haven't solved the problem of the PDF.
Hi Gary,
It can't be JUST that there is a div. There must be something else, like the width of the DIV exceeds the width of the page or something like that... The iPad handles DIVs perfectly fine.
I am an experienced HTML coder (16+ years experience) that has been writing websites the past few months designed specifically for the iPad (I like to design sites to appear like stand alone apps.
I would be happy to analyze the html code for you if you attach it to a post. At this point, the most useful bit would be the code that the browser is rendering, so on a Mac or PC, open the page in a browser and then show the source and save to file or copy/paste it to a text file and save it, and upload that here. Do the same with the PDF page's source (leave out the PDF itself - I can substitute a placeholder). If you need to obscure content for privacy/security, perhaps you can use false data in your app or if you absolutely must, SUPER CAREFULLY edit the saved browser source to REPLACE text content with nonsense text (it might also be a good idea to keep the replacement text the same length as the original as otherwise, formatting changes MIGHT occur).
The same with the PDF page source... Don't include the PDF itself. I can substitute another PDF in it's place.
Just understand, I am a professional UI Designer and raw coding of HTML is (amongst other things) what I do for a living, though I am more than happy to help others out with what I think is probably a simple issue.
It can't be JUST that there is a div. There must be something else, like the width of the DIV exceeds the width of the page or something like that... The iPad handles DIVs perfectly fine.
I am an experienced HTML coder (16+ years experience) that has been writing websites the past few months designed specifically for the iPad (I like to design sites to appear like stand alone apps.
I would be happy to analyze the html code for you if you attach it to a post. At this point, the most useful bit would be the code that the browser is rendering, so on a Mac or PC, open the page in a browser and then show the source and save to file or copy/paste it to a text file and save it, and upload that here. Do the same with the PDF page's source (leave out the PDF itself - I can substitute a placeholder). If you need to obscure content for privacy/security, perhaps you can use false data in your app or if you absolutely must, SUPER CAREFULLY edit the saved browser source to REPLACE text content with nonsense text (it might also be a good idea to keep the replacement text the same length as the original as otherwise, formatting changes MIGHT occur).
The same with the PDF page source... Don't include the PDF itself. I can substitute another PDF in it's place.
Just understand, I am a professional UI Designer and raw coding of HTML is (amongst other things) what I do for a living, though I am more than happy to help others out with what I think is probably a simple issue.
ASKER
<<It can't be JUST that there is a div. >>
Well, all I can say is that I added the following code and the problem disapeared:
If you want to see what is happening with the PDF, you can check out our web page. Its in Spanish, but all you have to do is the following.
1) go to www.conta.net
2) Usuario (user name): expertsexchange
Clave (password): 1234
3) Chose the menu Diario and submenu Diario.
4) Just hit (Aceptar)
The pdf should pop up and you can observe the problem.
Well, all I can say is that I added the following code and the problem disapeared:
Dim IsIpad As Boolean = (HttpContext.Current.Request.UserAgent.ToLower.Contains("ipad"))
' code ...
If Not IsIpad Then
SB.Append("<div align=" + Chr(34) + "left" + Chr(34) + " style= " + Chr(34) + " position:absolute; width: 95%; height:90%; z-index:auto; overflow: auto; left:10px; top: 40px; border: thin solid #E9E3AD; background-color: " & Colores(0) + Chr(34) + ">")
End If
' a lot of code to create the table ....
If Not IsIpad Then SB.Append("</div>")If you want to see what is happening with the PDF, you can check out our web page. Its in Spanish, but all you have to do is the following.
1) go to www.conta.net
2) Usuario (user name): expertsexchange
Clave (password): 1234
3) Chose the menu Diario and submenu Diario.
4) Just hit (Aceptar)
The pdf should pop up and you can observe the problem.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.